Multiple Div layout...

**afranklin** · 07-08-2008 06: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 06:38 AM

Originally Posted by afranklin

... 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 06: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 12:50 PM

Do you have a valid doctype?

**afranklin** · 07-09-2008 06: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 10:37 AM

you didnt follow his instruction fully and left out the 'add" part LOL

**afranklin** · 07-09-2008 10: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 11:14 AM

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 10:25 PM

It's working right for me.

**afranklin** · 07-10-2008 03: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 01:29 PM

I don't see a way to make it work like you want it to.

**CSSFUN** · 07-10-2008 03:55 PM

Originally Posted by afranklin

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 04:30 AM

You beaut!!

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

:-)

Thread: Multiple Div layout...

Thread Tools

Display

Multiple Div layout...

Can I get css to do all the work for me?!

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions