Help with floats

**iRay** · Nov 20, 2007 06:16

How could i use floats to position these div?

Code:

/* Content boxes and everything lated to them */
#box1 { position:absolute; left:15px; top:33px; width:287px; height:auto; background-color:#eeeff0;}
#box2 {	position:absolute; left:322px; top:33px; width:287px; height:190px; background-color:#eeeff0;}
#box3 {	position:absolute; left:15px; top:300px; width:287px; height:186px; background-color:#eeeff0;}
#box4 { position:absolute; left:322px; top:300px; width:287px; height:186px; background-color:#eeeff0;}
#box5 {	position:absolute; left:630px; top:33px; width:175px; height:auto; background-color:#eeeff0;}


/* Content boxes headers and everything related to them */
#hd1 { position:absolute; left:15px; top:10px; width:287px; height:22px; background-image: url(../images/hd1.jpg); background-repeat:no-repeat; text-indent:-9999px;}
#hd2 { position:absolute; left:322px; top:11px; width:287px; height:22px; background-image: url(../images/hd2.jpg); background-repeat:no-repeat; text-indent:-9999px;}
#hd3 { position:absolute; left:15px; top:270px; width:287px; height:22px; background-image: url(../images/hd3.jpg); background-repeat:no-repeat; text-indent:-9999px;}
#hd4 { position:absolute; left:322px; top:270px; width:287px; height:22px; background-image: url(../images/hd4.jpg);background-repeat:no-repeat; text-indent:-9999px;}
#hd5 { position:absolute; left:630px; top:11px; width:175px; height:22px; background-image: url(../images/hd5.jpg); background-repeat:no-repeat; text-indent:-9999px;}

Can someone please help?

Thanks in advance.

**Paul O'B** · Nov 20, 2007 07:00

Can we have the html that goes with that or a picture of what you are trying to achieve

**Paul O'B** · Nov 20, 2007 07:20

Just guessing from the CSS then it looks like you want something like this.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
#outer{
    width:810px;
}
.box{
    width:287px;
    height:208px;
    margin:10px 0 40px 15px;
    float:left;
    display:inline;/*ie double margin fix*/
    background:#eeeff0;
}
.box h3{
    height:22px;
    background:#ffffcc;
    margin:0;
}
p{margin:0 0 1em 0;}
.b1{height:auto;}
.b2{width:175px;height:auto}
.rwo{width:100&#37;;clear:both;}
</style>
</head>
<body>
<div id="outer">
    <div class="row">
        <div class="box b1">
            <h3>Heading</h3>
            <p>content goes here</p>
        </div>
        <div class="box">
            <h3>Heading</h3>
            <p>content goes here</p>
        </div>
        <div class="box b2">
            <h3>Heading</h3>
            <p>content goes here</p>
        </div>
    </div>
    <div class="row">
        <div class="box">
            <h3>Heading</h3>
            <p>content goes here</p>
        </div>
        <div class="box">
            <h3>Heading</h3>
            <p>content goes here</p>
        </div>
    </div>
</div>
</body>
</html>

Of course there are so many variables to take into account so this is just my best guess

**iRay** · Nov 20, 2007 08:40

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Page Title</title>
</head>
<body>
<div id="maincontainer">
 <div id="leftborder"></div>
  <div id="topbar"></div>
    <ul id="nav1">
    <li id="contact"><a href="#" title="Contact">contact</a></li>
    <li id="links"><a href="#" title="Links">links</a></li>
    </ul>
<div id="header">
    <a href="#" title="Company Name">Company Name</a></div>
    <div id="rightborder"></div>
    <ul id="nav2">
    <li id="home"><a href="#" title="Home">home</a></li>
    <li id="articles"><a href="#" title="Articles">articles</a></li>
    <li id="learn"><a href="#" title="Learn +">learn</a></li>
    <li id="tools"><a href="#" title="Tools">tools</a></li>
    <li id="adverts"><a href="#" title="Advertise">adverts</a></li>
    </ul>
  <div id="container">
<div id="hd1"><h1>content goes here</h1></div>
<div id="box1"><p>content goes here</p>  </div>
<div id="hd2"><h1>content goes here</h1></div>
<div id="box2"><p>content goes here</p></div>
<div id="hd3"><h1>ontent goes here</h1></div>
<div id="box3"><p>content goes here</p></div>
<div id="hd4"><h1>ontent goes here</h1></div>
<div id="box4"><p>content goes here</p></div>
<div id="hd5"><h1>ontent goes here</h1></div>
<div id="box5"><p>content goes here</p></div>
</div>
<div id="footer"><p>copyright here</p></div>  
<ul id="top">
	<li id="arrow"><a href="javascript:scroll(0,0);" title="Top">Top</a></li>
</ul>
</div>
</body>
</html>

**Paul O'B** · Nov 20, 2007 08:54

I believe my post #3 answered the question quite well anyway

User Tag List

Thread: Help with floats

Thread Tools

Display

Help with floats

here is the html file

Bookmarks

Bookmarks

Posting Permissions