Divs not aligning vertically

Collapse
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • beary
    New Member
    • Nov 2006
    • 170
    #1

    Divs not aligning vertically

    Hi,

    Below is a small piece of html. I'm using FF 3. It's of two divs. Inside the first Div are three divs: div A, div B and div C. Everything does what I need except that div B appears below div A and div C appears below div B. I need all three of div A, B and C to begin at the same vertical height.

    Would someone mind telling me what I need to tweak to make this happen?

    Code:
    <html>
<head>
</head>
<body>

<div style='position:relative;border:1px red solid;height:auto;'>
	<div style='border:1px black solid;position:relative;left:0%;top:0%;height:auto;width:33%;'>
		Div A
	</div>
	<div style='border:1px black solid;position:relative;left:33%;top:0%;height:auto;width:33%;'>
		Div B<br>Div B<br>Div B<br>Div B<br>
	</div>
	<div style='border:1px black solid;position:relative;left:66%;top:0%;height:auto;width:33%'>
		Div C
	</div>
</div>	
	
<div style='position:relative;border:1px green solid;height:auto;'>
	Second div<br>
</div>

</body>
</html>
    Tags: None
    • drhowarddrfine
      Recognized Expert Expert
      • Sep 2006
      • 7434
      #2
      The easiest thing to do would be to add 'float:left' to each div.

        Comment

        • beary
          New Member
          • Nov 2006
          • 170
          #3
          Hey there drhowardfine

          Thanks for your quick reply. I added float:left to each div, but it hasn't quite fixed the issue. I'll show you the code I have now and also attach an image of what has resulted. As you can see, there are a couple of things that don't seem to work and which I don't understand why (I freely confess I'm not an expert here).

          Div A, B and C are now aligned correctly. However, the div inside which they sit (red border) seems to have no height; I thought it would have the height of the largest inner div? And also, the second div (green border) seems to begin underneath div C rather than div A.

          Here's the code:

          Code:
          <html>
<head>
</head>
<body>

<div style='position:relative;border:1px red solid;height:auto;'>
	<div style='border:1px black solid;float:left;height:auto;width:33%;'>
		Div A
	</div>
	<div style='border:1px black solid;float:left;height:auto;width:33%;'>
		Div B<br>Div B<br>Div B<br>Div B<br>
	</div>
	<div style='border:1px black solid;float:left;height:auto;width:33%'>
		Div C
	</div>
</div>	
	
<div style='position:relative;border:1px green solid;height:auto;left:0%;'>
	Second div<br>
</div>

</body>
</html>
          and here's the screenshot:

            Comment

            • drhowarddrfine
              Recognized Expert Expert
              • Sep 2006
              • 7434
              #4
              Containing elements are never to expand to contain floated elements. To have that happen, you need to "clear the floats". There are several ways to do that. One is to just add 'overflow:auto' so elements "overflowin g" out of the parent will cause it to expand.

                Comment

                • beary
                  New Member
                  • Nov 2006
                  • 170
                  #5
                  drhowardfine, You are an absolute lifesaver. Thankyou so much for the fix and the theory behind it as well. Works exactly as required now.

                  Cheers

                    Comment

                    Previous template Next
                    Working...