PDA

Click to See Complete Forum and Search --> : Multiple Div layout...

afranklin
07-08-2008, 07:17 AM
Hi,

This maybe a silly question, but is there a way I can get div3 to sit directly below div1 without using two container divs (one for div1 and div3 and one for div2)?

Thanks!

<style type="text/css">
#div1{height:50px; width:50%; background-color:Aqua; float:left;}
#div2{height:100px; width:50%; background-color:Fuchsia; float:left;}
#div3{height:150px; width:50%; background-color:Green; float:left;}
</style>

<body>
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
</body>
</html>
WebJoel
07-08-2008, 07:38 AM
... but is there a way I can get div3 to sit directly below div1 without using two container divs (one for div1 and div3 and one for div2)?

Thanks!

<style type="text/css">
#div1{height:50px; width:50%; background-color:Aqua; float:left;}
#div2{height:100px; width:50%; background-color:Fuchsia; float:left;}
#div3{height:150px; width:50%; background-color:Green; float:left;}
</style>

<body>
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
</body>
</html> Remove "float:left;" from #div3, add "clear:left;". Clearing a previous float makes it 'stack' in the normal way (which would then be 'under' #div1)
afranklin
07-08-2008, 07:44 AM
Hi,

Thanks for this, but it doesn't seem to work? I am using IE6 if that makes any difference?
ray326
07-08-2008, 01:50 PM
Do you have a valid doctype?
afranklin
07-09-2008, 07:10 AM
Hi,

Sorry, I just posted the style and body to keep it simple. Here is the full page:

<%@ Page Language="C#" AutoEventWireup="true" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title></title>

<style type="text/css">
#d1{height:50px; width:49%; background-color:Aqua; float:left;}
#d2{height:100px; width:49%; background-color:Fuchsia; float:left;}
#d3{height:150px; width:49%; background-color:Green;}
</style>
</head>

<body>
<div id="d1">a</div>
<div id="d2">b</div>
<div id="d3">c</div>
</body>
</html>
expat
07-09-2008, 11:37 AM
you didnt follow his instruction fully and left out the 'add" part LOL
afranklin
07-09-2008, 11:44 AM
Oops! Sorry about that!!

But it still doesn't work unless I missed something else?
Sorry if I am being thick... Here is the latest code with no float left and added clear left!

Thanks again, I really appreciate the help!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1"><title>

</title>

<style type="text/css">
#d1{height:50px; width:49%; background-color:Aqua; float:left;}
#d2{height:100px; width:49%; background-color:Fuchsia; float:left;}
#d3{height:150px; width:49%; background-color:Green; clear:left;}
</style>
</head>

<body>
<div id="d1">a</div>
<div id="d2">b</div>
<div id="d3">c</div>
</body>
</html>
expat
07-09-2008, 12:14 PM
question is why u want to float them?? by definition divs will line up, so unless u tell us why u want them floating?
ray326
07-09-2008, 11:25 PM
It's working right for me.
afranklin
07-10-2008, 04:42 AM
Hi,

Thanks for your input...
Sorry if I haven't explained myself very well!

Please see attached images.
Basically what I want is to present my content in divs as follows:

If someone has a wider screen, then I would like the divs to line up in two colums as in image 1.

If they have a smaller screen then I would like it to line up in a single column as in image 2.

The plan was to detect the width of the screen by javascript and set the widths of the divs by css to 100% if the screen is small and change (again by javascript) to 49% if the screen is large.

I have the javascript working ok and only included (ealier in the posts) the code for the wider screen to keep it simple. This is almost working but I am getting the same as you ray326 - I'm really looking for the green block to be tucked up neatly under the blue and I don't know if this is possible.

Hope that makes sense.
If I can't do this this way (which would be really neat and simple!) then I think the alternative is to start with two container divs and change the widths of them and move the contents around to get the same effect but it would be much messier I think.

Thanks again,
a.
ray326
07-10-2008, 02:29 PM
I don't see a way to make it work like you want it to.
CSSFUN
07-10-2008, 04:55 PM
<style type="text/css">
#d1{height:50px; width:49%; background-color:Aqua; float:left;}
#d2{height:100px; width:49%; background-color:Fuchsia; float:left;}
#d3{height:150px; width:49%; background-color:Green; clear:left;} </style>
</head>

<body>
<div id="d1">a</div>
<div id="d2">b</div>
<div id="d3">c</div>
</body>


you can set d3's "margin-top:-49px;". Beacuse you know the height of d1 and d2, so you can easy to know where you d3 can go. Using Javascript to add this attribute in.
afranklin
07-11-2008, 05:30 AM
You beaut!!

Thank you so much and cheers ray326, expat and webjoel for your suggestions.

:-)