dcsimg
www.webdeveloper.com
Results 1 to 13 of 13

Thread: Multiple Div layout...

  1. #1
    Join Date
    Mar 2005
    Posts
    40

    Multiple Div layout...

    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>

  2. #2
    Join Date
    Dec 2005
    Location
    American, living in Toronto, ON. CANADA
    Posts
    6,746
    Quote 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)
    Last edited by WebJoel; 07-08-2008 at 07:44 AM.

  3. #3
    Join Date
    Mar 2005
    Posts
    40
    Hi,

    Thanks for this, but it doesn't seem to work? I am using IE6 if that makes any difference?

  4. #4
    Join Date
    Nov 2003
    Location
    Jerryville, Tejas
    Posts
    11,715
    Do you have a valid doctype?

  5. #5
    Join Date
    Mar 2005
    Posts
    40
    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>

  6. #6
    Join Date
    Jun 2008
    Posts
    51
    you didnt follow his instruction fully and left out the 'add" part LOL

  7. #7
    Join Date
    Mar 2005
    Posts
    40
    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>

  8. #8
    Join Date
    Jun 2008
    Posts
    51
    question is why u want to float them?? by definition divs will line up, so unless u tell us why u want them floating?

  9. #9
    Join Date
    Nov 2003
    Location
    Jerryville, Tejas
    Posts
    11,715
    It's working right for me.
    Attached Images Attached Images

  10. #10
    Join Date
    Mar 2005
    Posts
    40

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

    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.
    Attached Images Attached Images

  11. #11
    Join Date
    Nov 2003
    Location
    Jerryville, Tejas
    Posts
    11,715
    I don't see a way to make it work like you want it to.

  12. #12
    Join Date
    Jul 2008
    Posts
    10
    Quote Originally Posted by afranklin
    <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.

  13. #13
    Join Date
    Mar 2005
    Posts
    40
    You beaut!!

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

    :-)

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles