Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations TouchToneTommy on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Aligning divs

Status
Not open for further replies.
tshad

tshad

Programmer
Jul 15, 2004
386
US
I have 4 sets of Divs in my sample. In my 1st two divs, I have 2 divs that I want to be side by side.

I have other divs that I can get side by side fine. Normally, you just put a "float:left" on both divs to get them next to each other and "float:right" on one of them to get them side by side but one will be all the way to right.

It turns out the Clear:Left solves the problem. But not really. One question is why does the Blue border surround the Div2 and the Div3 is outside of the border.

In the 2nd example neither of the Divs (Div5 and Div6) is inside the border and the border is just a straight line above both divs.

Both should be inside the blue border. The blue border extends to the end of the page, which is expected.

In the last to divs, I can line up all the divs fine by setting all of them to be float:left.

But I want the Div15 and Div16 to be below Div13 and Div14 so that I have 2 rows and 2 columns.

I thought by putting a clear in the Div15, that would move Div15 to the next line (which it does), but now Div16 is below Div15 (because both are not Float:left, I think).

Also the blue border is now around the 1st 3 Divs and the 4th div is outside the border.

How do i get the 2 rows and 2 columns and the blue border to surround the whole thing?

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml"[/URL] xml:lang="en">
<head>
    <title></title>
</head>
<body>
    <div id="Div1" style="border: 2px solid blue">
        <div id="Div2" style="clear: left; width: 25%; border: 2px solid red">
            <span>Div2</span>
        </div>
        <div id="Div3" style="float: left; width: 25%; border: 2px solid yellow">
            <span>Div3 </span>
        </div>
    </div>
    <br />
    <br />
    <br />
    <div id="Div4" style="border: 2px solid blue">
        <div id="Div5" style="float: left; width: 25%; border: 2px solid red">
            <span>Div5</span>
        </div>
        <div id="Div6" style="float: left; width: 25%; border: 2px solid yellow">
            <span>Div6 </span>
        </div>
    </div>
    <br />
    <br />
    <br />
    <div id="Div7" style="border: 2px solid blue">
        <div id="Div8" style="float: left; width: 20%; border: 2px solid Green">
            <span>Div8</span>
        </div>
        <div id="Div9" style="float: left; width: 20%; border: 2px solid orange">
            <span>Div9 </span>
        </div>
        <div id="Div10" style="float: left; width: 20%; border: 2px solid red">
            <span>Div10</span>
        </div>
        <div id="Div11" style="float: left; width: 20%; border: 2px solid yellow">
            <span>Div11 </span>
        </div>
    </div>
    <br />
    <br />
    <br />
    <div id="Div12" style="border: 2px solid blue">
        <div id="Div13" style="float: left; width: 20%; border: 2px solid Green">
            <span>Div13</span>
        </div>
        <div id="Div14" style="float: left; width: 20%; border: 2px solid orange">
            <span>Div14 </span>
        </div>
        <div id="Div15" style="clear: left; width: 20%; border: 2px solid red">
            <span>Div15</span>
        </div>
        <div id="Div16" style="float: left; width: 20%; border: 2px solid yellow">
            <span>Div16 </span>
        </div>
    </div>
</body>
</html>

Thanks,

Tom
 
Sort by date Sort by votes
I thought the code would show the HTML correctly, but it didn't. Here is the HTML:

**********************************************
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "<html xmlns=" xml:lang="en">
<head>
<title></title>
</head>
<body>
<div id="Div1" style="border: 2px solid blue">
<div id="Div2" style="clear: left; width: 25%; border: 2px solid red">
<span>Div2</span>
</div>
<div id="Div3" style="float: left; width: 25%; border: 2px solid yellow">
<span>Div3 </span>
</div>
</div>
<br />
<br />
<br />
<div id="Div4" style="border: 2px solid blue">
<div id="Div5" style="float: left; width: 25%; border: 2px solid red">
<span>Div5</span>
</div>
<div id="Div6" style="float: left; width: 25%; border: 2px solid yellow">
<span>Div6 </span>
</div>
</div>
<br />
<br />
<br />
<div id="Div7" style="border: 2px solid blue">
<div id="Div8" style="float: left; width: 20%; border: 2px solid Green">
<span>Div8</span>
</div>
<div id="Div9" style="float: left; width: 20%; border: 2px solid orange">
<span>Div9 </span>
</div>
<div id="Div10" style="float: left; width: 20%; border: 2px solid red">
<span>Div10</span>
</div>
<div id="Div11" style="float: left; width: 20%; border: 2px solid yellow">
<span>Div11 </span>
</div>
</div>
<br />
<br />
<br />
<div id="Div12" style="border: 2px solid blue">
<div id="Div13" style="float: left; width: 20%; border: 2px solid Green">
<span>Div13</span>
</div>
<div id="Div14" style="float: left; width: 20%; border: 2px solid orange">
<span>Div14 </span>
</div>
<div id="Div15" style="clear: left; width: 20%; border: 2px solid red">
<span>Div15</span>
</div>
<div id="Div16" style="float: left; width: 20%; border: 2px solid yellow">
<span>Div16 </span>
</div>
</div>
</body>
</html>
***********************************************
Thanks,

Tom
 
Upvote 0 Downvote
I think this is more readable.

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml"[/URL] xml:lang="en">
<head>
    <title></title>
</head>
<body>
    <div id="Div1" style="border: 2px solid blue">
        <div id="Div2" style="clear: left; width: 25%; border: 2px solid red">
            <span>Div2</span>
        </div>
        <div id="Div3" style="float: left; width: 25%; border: 2px solid yellow">
            <span>Div3 </span>
        </div>
    </div>
    <br />
    <br />
    <br />
    <div id="Div4" style="border: 2px solid blue">
        <div id="Div5" style="float: left; width: 25%; border: 2px solid red">
            <span>Div5</span>
        </div>
        <div id="Div6" style="float: left; width: 25%; border: 2px solid yellow">
            <span>Div6 </span>
        </div>
    </div>
    <br />
    <br />
    <br />
    <div id="Div7" style="border: 2px solid blue">
        <div id="Div8" style="float: left; width: 20%; border: 2px solid Green">
            <span>Div8</span>
        </div>
        <div id="Div9" style="float: left; width: 20%; border: 2px solid orange">
            <span>Div9 </span>
        </div>
        <div id="Div10" style="float: left; width: 20%; border: 2px solid red">
            <span>Div10</span>
        </div>
        <div id="Div11" style="float: left; width: 20%; border: 2px solid yellow">
            <span>Div11 </span>
        </div>
    </div>
    <br />
    <br />
    <br />
    <div id="Div12" style="border: 2px solid blue">
        <div id="Div13" style="float: left; width: 20%; border: 2px solid Green">
            <span>Div13</span>
        </div>
        <div id="Div14" style="float: left; width: 20%; border: 2px solid orange">
            <span>Div14 </span>
        </div>
        <div id="Div15" style="clear: left; width: 20%; border: 2px solid red">
            <span>Div15</span>
        </div>
        <div id="Div16" style="float: left; width: 20%; border: 2px solid yellow">
            <span>Div16 </span>
        </div>
    </div>
</body>
</html>

Thanks,

Tom
 
Upvote 0 Downvote
I don't understand why this is not showing formatted. It does in preview.

Sorry,

Tom
 
Upvote 0 Downvote
The code looks fine and is readable in both c ode blocks.

Anyway,

The first set of divs:

Code: 
<div id="Div1" style="border: 2px solid blue">
        <div id="Div2" style="clear: left; width: 25%; border: 2px solid red">
            <span>Div2</span>
        </div>
        <div id="Div3" style="float: left; width: 25%; border: 2px solid yellow">
            <span>Div3 </span>
        </div>
</div>

Floated elements do not contribute to their parent's height. so while the unfloated div does make the surrounding div stretch, the floated one does not. To get around this, you can add a clearing element, or simply give the parent a defined overflow.

Code: 
<div id="Div1" style="border: 2px solid blue;">
        <div id="Div2" style="clear: left; width: 25%; border: 2px solid red">
            <span>Div2</span>
        </div>
        <div id="Div3" style="float: left; width: 25%; border: 2px solid yellow">
            <span>Div3 </span>
        </div>
[red]<p style="clear:both;"></p>[/red]
</div>

or

Code: 
<div id="Div1" style="border: 2px solid blue; [red]overflow:hidden;[/red]">
        <div id="Div2" style="clear: left; width: 25%; border: 2px solid red">
            <span>Div2</span>
        </div>
        <div id="Div3" style="float: left; width: 25%; border: 2px solid yellow">
            <span>Div3 </span>
        </div>
</div>


Second set of Divs suffer from the same issue, except since both are floated nothing contributes to the parent's height. Again add a clearing element, or an overflow to the parent.


Last set of Div's:

You wanted them floated then float them. The clear:left clears the previous floating of the 2 top divs so the next set can drop to the nest line, but you still need to float both of them to get the next row side by side.

Code: 
 <div id="Div12" style="border: 2px solid blue">
        <div id="Div13" style="float: left; width: 20%; border: 2px solid Green">
            <span>Div13</span>
        </div>
        <div id="Div14" style="float: left; width: 20%; border: 2px solid orange">
            <span>Div14 </span>
        </div>
        <div id="Div15" style="clear: left; [red]float:left;[/red] width: 20%; border: 2px solid red">
            <span>Div15</span>
        </div>
        <div id="Div16" style="float: left; width: 20%; border: 2px solid yellow">
            <span>Div16 </span>
        </div>
    </div>

And again add an overflow, or a clearing element like above to get the parent div to surround the inner divs.

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Web & Tech
 
Upvote 0 Downvote
That helps a lot.

So I can either put the Clear at the end of the block before the closing div or in the style of the following set of divs.

What does "clear: left; float:left;" do?

I assume the clear will put the div on the next line. But doesn't the :float:left" override the clear?

Also, I noticed that in the first example you can have the first div not floated and the 2nd one floated to get them side by side

But in the last one, for the 2nd row, the 3rd div can't be not floated like the first but both must be floated. That was what was confusing.

Thanks,

Tom
 
Upvote 0 Downvote
The clear property simply removes the effects of any preceding floats, making the next set of elements return to standard non floated behavior. It does not apply anything to the div it's in.

So clear:left; float:left; would as I said clear the float from the previous 2 divs, and make the next set start on the next line. However to get them side by side you still need to float them.

The first example will never have the divs side by side unless you float both of them. I wasn't addressing that issue, merely the fact that the outer div wasn't surrounding them.


----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Web & Tech
 
Upvote 0 Downvote
I see.

You have to float both divs to get them side by side.

You said the clearing, clears the float from the previous 2 divs. A little confused about that. The previous 2 divs are still floating.

If I clear or don't put a float in the 3rd div, the same thing happens, the 3rd div goes to the next line and since it is not floating, the 4th div will also go down another line (below the 3rd div). Since the 3rd and 4th div are not both floats, they will not be side by side.

So this is the only reason I can see for having a clear on a div, to force the div to the next line and then to apply a float (left or right) to allow the next div to be side by side if it is a float.

If you are not going to apply a float, you don't need a clear - it will be cleared anyway.

I just wanted to make sure I was correct here as at our office we have a "clear" style that is being applied to a div but not float. So now based on this discussion, it seems that those divs that have only the "clear" style are really not being affected at all - if I understand this correctly.

Thanks,

Tom
 
Upvote 0 Downvote
Yes. If your element is not floated, then clear:left; will do nothing. As it will still appear on the next line.



----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Web & Tech
 
Upvote 0 Downvote
it took me a fair bit of time to get my head around this 'clear' thing, but i ended up experimenting myself to undersatnd it and how it works.

its easier than it looks. Here are some screenshots of the experimenting/playing around, that helped me get to grips with the basics of this clear property.

 
Upvote 0 Downvote
btw folks - i dont know why, by using 'float:left' the 'vertical-align: middle' gets overrided lol

i mean, wtf is THAT all a bout eh ?


do as i say - obey the programmer you stupid code ! ^_^

lol
 
Upvote 0 Downvote
i guess vertical centering can be achieved using margins , too lazy to do the math in my head though.
 
Upvote 0 Downvote
I also found that by using the floating objects, the surrounding Div doesn't expand.

I have 10 divs that have all the floated elements in them.

I make them visible as needed.

The problem is that the outside div doesn't expand and the divs write over my grid that is below the div.

How would I handle that?

Thanks,

Tom
 
Upvote 0 Downvote
ME said:
Floated elements do not contribute to their parent's height. so while the unfloated div does make the surrounding div stretch, the floated one does not. To get around this, you can add a clearing element, or simply give the parent a defined overflow.
Click to expand...


----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Web & Tech
 
Upvote 0 Downvote
btw folks - i dont know why, by using 'float:left' the 'vertical-align: middle' gets overrided lol

i mean, wtf is THAT all a bout eh ?
Click to expand...

vertical-align only applies to inline boxes and when an element is floated it becomes a "block box".


Chris.

Indifference will be the downfall of mankind, but who cares?
Time flies like an arrow, however, fruit flies like a banana.
Webmaster Forum
 
Upvote 0 Downvote
you dont have to float 2 elements to have them appear side by side.

the more effecient way, IMO, to do this is float the element that has "shorter" content. What I mean by shorter content is the element that will ALWAYS be shorter. this way you wont have to worry about using an element with clear.

Code: 
.container {background:#ccc;}
.div1 {float:left; width: 250px;}
.div2 {padding-left: 270px;}

<div class="container">
<div class="div1">some "short" content here</div>
<div class="div2"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam vulputate, metus vitae cursus blandit, massa turpis laoreet massa, sit amet pharetra urna dui quis dui. Nunc porta vestibulum enim congue lacinia. Donec id eros eu nibh vehicula blandit. Integer ipsum nisl, auctor sit amet egestas vitae, tincidunt eget turpis. Donec aliquet porta justo, a feugiat augue varius nec. Pellentesque eu porttitor leo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec urna nunc, tincidunt vitae facilisis nec, elementum sed mauris. Integer vitae libero purus. Quisque lobortis tincidunt purus a laoreet. Sed tincidunt blandit ipsum sollicitudin pellentesque. Curabitur auctor, arcu quis aliquet tempor, lorem magna auctor ante, quis dictum tortor urna non lacus. Aliquam feugiat scelerisque hendrerit. Morbi sagittis ornare metus, in viverra tortor adipiscing in. Vestibulum sed diam vel metus blandit tristique eget quis augue.

Ut sit amet elementum ipsum. Ut tempus mi vitae nibh placerat quis luctus est feugiat. Nulla et velit nulla, non sollicitudin leo. Aliquam placerat, enim sit amet iaculis hendrerit, massa diam fermentum nulla, nec blandit tortor tortor pharetra urna. Morbi pellentesque ligula quis lacus semper sit amet cursus nulla tempus. Aenean libero lacus, luctus nec faucibus a, fringilla id tortor. Suspendisse quis ipsum vel dui laoreet mattis ac a magna. Morbi consectetur velit ac justo imperdiet adipiscing faucibus orci porta. Praesent imperdiet aliquet blandit. Fusce lorem quam, fermentum a porttitor eget, tristique nec dui. Praesent sed nisi nibh, in laoreet nulla. Pellentesque id eros et ante mattis eleifend non sit amet massa. Nulla facilisi. Aliquam molestie, ligula et molestie molestie, justo nisi sollicitudin massa, a sodales diam turpis ut leo. Maecenas sed est ac urna consectetur gravida. </div>
</div>

In this layout DIV2 is fluid and will always adjust to the size of the containing DIV which will be 100% width since none is specified.

Darryn Cooke
| Marketing and Creative Services
 
Upvote 0 Downvote
vertical-align only applies to inline boxes and when an element is floated it becomes a "block box".


thanks for sharing that with me ChrisHirst.

it feel angry with myself that I forgot about all that 'block-level vs inline' element stuff that I read few months ago.


And also a very smart approach there by darryncooke, impressed.




 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

tyutghf
  • Locked
  • Question
Slanted divs
Replies
0
Views
301
tyutghf
tyutghf
yaknowss
  • Locked
  • Question
Create divs with different background colors
Replies
1
Views
81
ChrisHirst
ChrisHirst
southbeach
  • Locked
  • Question
Help with DIVs and CSS to render ROWS/COLS like grid
Replies
4
Views
117
southbeach
southbeach
rrmcguire
  • Locked
  • Question
gap between divs...
Replies
2
Views
84
vacunita
vacunita
mike224
  • Locked
  • Question
my inner divs dont inherit the parent background colour
Replies
1
Views
88
vacunita
vacunita

Part and Inventory Search

Sponsor

Back
Top