PDA

View Full Version : Float and positioning



snowysweb
Oct 22nd, 2008, 11:17 AM
hello all was wondering if you could help

```###################
``#`````````````````````#
`#```````` DIV1````````#
###################
```###################
``#`````````````````````#
`#```````` DIV2````````#
###################
```####################
``#`/////``/////``/////``/////#
`#`|*1|``|*2|``|*3|``|*4|# ---- DIV 3, with 4 divs in set to float left.
#`/////``/////``/////``/////#
###################
```###################
``#`````````````````````#
`#```````` DIV4````````#
###################

could anyone tell me how to achieve this layout WITHOUT DIV4 floating up to the bottom of DIV2?!??!?!

abduraooft
Oct 22nd, 2008, 11:20 AM
Add clear:both; to your div4

snowysweb
Oct 22nd, 2008, 11:23 AM
see, thats what i thought but still not working

abduraooft
Oct 22nd, 2008, 11:30 AM
Could you post your html and CSS?

snowysweb
Oct 22nd, 2008, 11:31 AM
its not nice but yeah, wait a min..

snowysweb
Oct 22nd, 2008, 11:31 AM
<!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>
<link href="stylesheet.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="header">
</div>

<div id="wrapper">

<ul id="nav">
<li><a href="#" accesskey="0" tabindex="1">Home</a></li>
<li><a href="#" accesskey="1" tabindex="2">Services</a></li>
<li><a href="#" accesskey="2" tabindex="3">Portfolio</a></li>
<li><a href="#" accesskey="3" tabindex="4">Contactus</a></li>
</ul>

<div id="main">
<h1>Welcome to Snowys Web Solutions</h1>
<h2>Creating great professional web sites, for yous personal or business use.</h2>
<p>SnowysWebSolutions is a single owned company devised to create professional websites for businesses and users with personal interests and hobbies at a single low price, with no strings attached. The current flourishing array of website designers, programmers and creators has currently rose to such a level, that there cost maybe too high for your price range. SnowysWebSolutions is here to try and help you! Please feel free to look at my Portfolio to browse through previous projects. The Services tab will inform you in depth about what services i offer in a package and at what cost, and finaly you can Contact me via phone, email or you can easily submit an online form.
</p>
</div>

<div id="mid">
<div class="wrap">
<h3>Dark Light</h3>
<img src="small_darklight.jpg" alt="Dark Light" height="100" width="100"/>
This was to be an online multiplayer stratergy game. Is not yet complete due...
</div>

<div class="wrap">
<h3>Silverburn</h3>
<img src="small_silverburn.jpg" alt="Silverbunlandscapes" width="100" height="100" />
This is a site designed for a local landscape gardener who is based in...
</div>

<div class="wrap">
<h3>Dark Light</h3>
<img src="small_darklight.jpg" alt="Dark Light" />
This was to be an online multiplayer stratergy game. Is not yet complete due...
</div>

<div class="wrap">
<h3>Dark Light</h3>
<img src="small_darklight.jpg" alt="Dark Light" />
This was to be an online multiplayer stratergy game. Is not yet complete due...
</div>
</div>
<div id="clear"></div>
<div id="thing">
dfd
</div>
</div>


</body>
</html>

snowysweb
Oct 22nd, 2008, 11:32 AM
body {
background: url(Untitled-2.png) no-repeat;
padding: 5px 5px;
text-align: center;
}

/* -------------HEADER BOX CSS ---------------*/
#header {
width: 900px;
/*for now:*/
height: 200px;
background-color: #003333;
/*end*/
margin: 10px auto;
position: relative;
}
/* -------------END OF HEADER BOX CSS ---------------*/

#wrapper {
margin: 0 auto;
padding: 0;
width: 900px;
text-align: left;
position: static;
}

/* -------------NAVIGATION CSS ---------------*/
ul#nav {
margin: 0;
padding: 2px 0 2px 0;
border: 2px solid #CCCCCC;
background-color: #a4c85f;
position: relative;
}
ul#nav li {
margin: 0;
padding: 2px 0 2px 10px;
list-style: none;
display: inline;
}
ul#nav li a {
margin: 0;
padding: 0;
font-family: Arial, Helvetica, sans-serif;
color: #003333;
font-size: 12px;
text-decoration: none;
font-weight: 600;

}
ul#nav li a:hover {
color: #FFFFFF;
}
/* -------------END OF NAVIGATION CSS ---------------*/
#main {
padding: 5px 5px 5px 5px;
border: 2px solid #CCCCCC;
border-top: 0;
background: #83b2c7 url(background2.png) no-repeat;
position: relative;
}

div#main p {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #003333;
font-weight: 400;

}

#mid {
margin: 5px 0;
padding: 5px 5px 5px 5px;
border: 2px solid #CCCCCC;
width: 887px;
text-align: center;
position: absolute;
}
.wrap {
border: 1px solid #000000;
width: 200px;
margin: 0 4px;
float: left;
}


h1 {
padding: 0 0 0 0;
margin: 4px 0px 0px 0px;
font-family: Arial, Helvetica, sans-serif;
font-size: 28px;
font-weight: bolder;
color: #003333;

}
h2 {
padding: 0 0 0 0;
margin: 0 0 0 0;
font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
color: #003333;

}
h3 {
text-align: left;
padding: 0;
margin: 0;
}

img.logos {

}
#thing {
clear: both;
position: absolute;
width: 900px;
border: 1px solid #000000;

}

abduraooft
Oct 22nd, 2008, 12:32 PM
Hiya, remove the position:absolute from

#mid {
border:2px solid #CCCCCC;
margin:5px 0pt;
padding:5px;
position:absolute;
text-align:center;
width:887px;
}
and then add
#clear{
clear:both;
}

BTW, to see the #mid's border wrapped around the four child divs, you need to move
<div id="clear"></div> into #mid div, as the last element.

PS: It's better to use a class to the clear div, as you may reuse the same class-name in a different place, if required.

snowysweb
Oct 22nd, 2008, 12:58 PM
Sweet as a nut, thank ya.