내 웹 사이트에 문제가 있습니까? 두 div를 정렬하는 데 문제가있다

Question

그래서이 문제가 내게 준 모든 문제 때문에 내가 그만 둘 때가되었다. 그래서 누군가가 나를 도울 수 있다면 그것은 좋을 것입니다 : D!

내 웹 사이트에서 내가하고 싶은 일은 웹 사이트 왼쪽에 div 상자가있는 것입니다. 여기에 내 웹 사이트가 무엇인지 설명하는 다른 페이지로 이동하는 "자세히 알아보기"링크가 있습니다. 그 아래에 비디오가 있기를 원합니다. (내 웹 사이트를 설명하는 내게있을 것입니다.)

다른 div 상자에는 사용자가 서명 할 수있는 "가입 양식"이 있어야합니다. 위로 내 웹 사이트에 대한

지금 내 문제는 박스 또는 가입 시트를 나란히 정렬되지 않습니다.

지금 당장 제 문제는 상자 상단 맞춤입니다. 내가 "float : left;" 이 상자의 상단 경계 중 하나이 지금까지 http://www.shoportrade.org/ 당신이 상자 돈 '을 볼 수 있듯이 내 웹 사이트입니다 예를 들어 다음 다른

까지 더 높다 그들에게 그러나 (내가 원하는 정확히처럼) 나란히 정렬 t 하나 나는 그것이 그렇다고이 이

이 사람이 나를 도울 수 http://www1.picturepush.com/photo/a/12506959/640/12506959.png

같이 할 다른

다음 낮은, 국경의 상단에서 완벽하게 정렬? 벽에 부딪 쳤고이 문제를 해결하고 싶습니다.

Answer 1

<div id="myform"> 뒤에 <br>이 있기 때문입니다. 당신은 모든 휴식 태그가 왜

Answer 2

는 모르겠지만, 이것은 당신의 구문처럼 할 필요가 무엇 :

이

<div id="header"> 

</div> 

<div id="container"> 
    <div class="ex"> 

    </div> 
    <div class="myform"> 

    </div> 
    <div class="clear"></div> 
</div> 

헤더가 같은 상태를 유지한다. 컨테이너는 두 상자를 모두 포장해야합니다.

이

.container { width:980px; margin: 0 auto; } 

같은 (플로트 : 왼쪽)있을 것입니다 귀하의 .ex 클래스 : 또한 동일하게 유지 것이다 당신의 .myform 클래스 보통이이 CSS로 페이지에 정렬 센터 (플로트 : 왼쪽한다).

하는 명확한 클래스의 모습 일반적으로 브라우저가 최종 디스플레이의 높이를 계산 도움을 담당하고 : 우선

.clear { clear: both; height: 1px; } 

Answer 3

, 당신의 코드에서 몇 가지 실수가있다.

<div id='header'></a href='http://www.shoportrade.org/'><img src='mylogo1.png'></img></a> 

처럼 당신이 <style>에서 클래스 myForm을 선언하는 생각

<div id='header'><a href='http://www.shoportrade.org/'><img src='mylogo1.png' /></a></div> 

을해야하지만, 난 당신이 완전히 잘못이 <div id="myform">를 구현하기 위해 노력하고 코드에서 본 . <div class="myform">이어야합니다. 그 div에 대한 다른 스타일을 실제로 구현하려는 경우 다른 ID 이름을 사용해야한다고 생각합니다. <div id='boxstyle'></div>

Answer 4

여기에 수레를 사용하지 않는 방법이 있습니다. 두 상자의 높이는 컨테이너 높이에 따라 달라집니다.

상자의 높이를 다르게하려면 "하단"값을 변경하십시오.

http://jsfiddle.net/Calum/m783T/

CSS

#container { 
    height: 500px; 
    width: 800px; 
    position: relative; 
    background-color: green; 
} 

#box, #box2 { 
    position: absolute; 
    top: 50px; 
    width: 200px; 
} 

#box { 
    background-color: blue; 
    left: 50px; 
    bottom: 50px; 
} 

#box2 { 
    background-color: red; 
    right: 50px; 
    bottom: 50px; 
} 

<div id="container"> 
    <div id="box"> 
     <p>This is box 1</p> 
    </div> 
    <div id="box2"> 
     <p>This is box 2</p> 
    </div> 
</div>