SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Addict
    Join Date
    Mar 2004
    Posts
    260
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    DIV positioning question

    Is there any way to position 5 DIVs within a container DIV like this? I'm wondering whether there is a solution that does not require me to put DIVs 4 and 5 in a cointaining DIV. I want them all loose, really. Possible?


  2. #2
    Design Your Site Team bronze trophy Erik J's Avatar
    Join Date
    May 2007
    Location
    Countryside, Sweden
    Posts
    3,407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If the divs are all fixed size, maybe float:left can place them in as you want.
    Happy ADD/ADHD with Asperger's

  3. #3
    SitePoint Enthusiast
    Join Date
    Feb 2008
    Posts
    29
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    for somthing like this i tend to use a "margin-left: " tag in my stylesheet

    FOR EXAMPLE
    Code:
    #mainArea {
       width:200px;
       height:inherit;
       margin-left:200px;
       margin-top:-40px;
    }

  4. #4
    Design Your Site Team bronze trophy Erik J's Avatar
    Join Date
    May 2007
    Location
    Countryside, Sweden
    Posts
    3,407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Without changing div-order in html, you can float all divs left and use margin-top to help 4 and 5. If the divs grows you need to adjust margin-top on 4 and 5.
    Code HTML4Strict:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>Untitled</title>
    <meta name="generator" content="PSPad editor, www.pspad.com">
    <style type="text/css">
    body{width:820px}
    div{
    	float: left;
    	margin: 5px 5px 0 0;
    	background: #ccc;}
    #one{
    	width: 200px;
    	height: 155px;
    }
    #two{
    	width: 400px;
    	height: 100px;
    }
    #three{
    	width: 400px;
    	height: 50px;
    }
    #four{
    	margin-top: -100px;
    	width: 200px;
    	height: 75px;
    }
    #five{
    	margin-top: -20px;
    	width: 200px;
    	height: 75px;
    }
    </style>
    </head>
    <body>
    	<div id="one">1</div>
    	<div id="two">2</div>
    	<div id="three">3</div>
    	<div id="four">4</div>
    	<div id="five">5</div>
    </body>
    </html>
    Happy ADD/ADHD with Asperger's

  5. #5
    SitePoint Addict
    Join Date
    Mar 2004
    Posts
    260
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you very much for your effort in posting this.
    That seems to work well.
    Just to check, will that be good in 'all' browsers?

  6. #6
    Design Your Site Team bronze trophy Erik J's Avatar
    Join Date
    May 2007
    Location
    Countryside, Sweden
    Posts
    3,407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Glad if it is useful.

    It should be ok, no bug trigger, its just floating inside its container. A div-container can be used as usual.
    Happy ADD/ADHD with Asperger's

  7. #7
    SitePoint Addict
    Join Date
    Mar 2004
    Posts
    260
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Great. Many thanks again!


Bookmarks

Posting Permissions

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