|
|||||||||
|
|||||||||
|
|||||||||
| |
|||
 |
|
|
|
|
|||||||||
|
|||||||||
|
|||||||||
| |
|||
|
|
|
|
| |||||||||
 |
|
|
«
Previous Thread
|
Next Thread
»
|
Thread Tools | Search this Thread | Display Modes |
Dev Articles Community Forums Sponsor:
|
|
|
|
#1
July 12th, 2006, 07:52 AM
|
|||
|
|||
|
5 divs inside one div, help!!
Hey
I am trying to get 5 divs to sit correctly inside 1 div so they are of equal width and fill the div 100% here is my code Code:
<html>
<style type="text/css">
<!--
#Layer3 {
position:absolute;
width:157px;
height:211px;
z-index:1;
left: 20px;
top: 338px;
}
#Layer4 {
position:absolute;
width:200px;
height:115px;
z-index:1;
left: 27px;
top: 368px;
}
-->
</style>
<head>
<title>THREE-COLUMN LIQUID LAYOUT WITH FLOATING BOXES</title>
<style type="text/css">
<!--
body, html {
height:100%;
}
body {
margin:0 10px 0 10px;
padding:0;
}
#wrap {
position:relative;
min-height:100%;
}
* html #wrap {
height:100%;
}
#header {
background: #0066cc;
width: 100%;
height:100px
}
#nhs {
background: #0066cc;
float: right
}
#headerbar {
background: #999999;
width: 100%;
height:20px
}
#topcol {
background:url(Design/images/gradback.gif);
float: left;
width: 100%;
height: 190px;
}
#bottomcol {
background: #fff;
float: left;
width: 100%;
height: 250px;
bottom:0;
}
#box1 {
position:absolute;
background-color:#FF0000;
width: 19%;
left: 0%;;
}
#box2 {
position:absolute;
background-color:#00CC00;
width: 19%;
left: 20%;
}
#box3 {
position:absolute;
background-color:#FF00FF;
width: 19%;
left: 40%;
}
#box4 {
position:absolute;
background-color:#CCFF00;
width: 19%;
left: 60%;
}
#box5 {
position:absolute;
background-color:#663300;
width: 19%;
left: 80%;
}
.boxTitle {
background-color:#00CCFF;
colour:#000000;
margin: 0px;
padding: 4px;
border-bottom: solid 5px white;
}
}
#footer {
background: #999999;
clear: both;
height: 20px;
width: 100%;
}
#Layer1 {
position:absolute;
width:250px;
height:87px;
z-index:1;
left: 373px;
top: 5px;
}
#Layer2 {
position:absolute;
width:200px;
height:115px;
z-index:1;
left: 16px;
top: 340px;
}
-->
</style>
</head>
<body>
<div id="header">Header Section
<div id="nhs"></div>
</div>
<div id="headerbar">Headerbar Section</div>
<div id="topcol">Top Section</div>
<div id="bottomcol"><div id="box1">
<p class="boxTitle">Box 1 Title></p>
<p>Hello.... This is Box 1</p>
</div>
<div id="box2">
<p class="boxTitle">Box 2 Title></p>
<p>Hello.... This is Box 2</p>
</div>
<div id="box3">
<p class="boxTitle">Box 3 Title></p>
<p>Hello.... This is Box 3</p>
</div>
<div id="box4">
<p class="boxTitle">Box 4 Title></p>
<p>Hello.... This is Box 4</p>
</div>
<div id="box5">
<p class="boxTitle">Box 5 Title></p>
<p>Hello.... This is Box 5</p>
</div>
</div>
<div id="footer">Footer Section</div>
</body>
</html>
Mod edit: Added [code] tags for readability. --Jon.
|
|
#2
July 12th, 2006, 09:31 AM
|
||||||
|
||||||
|
I assume you want them side by side?
To achieve that you need to use the display: table-cell; attribute. That tells the browser not to put a line-break after the div. Also, make sure you have border, margin and padding set to 0px, the width attribute only applies to the actual content, the b, m & p are added to this, and all browsers use different defaults when these aren't specified. Finally, don't use position: absolute; It places the element on an absolute position ON THE PAGE, not in the parent element. You can then also leave the left: x%; tags out. If you use the display: table-cell; attribute, and put the divs in the correct order, they'll automatically be put side by side. Also, if padding, margin etc are set, you should be able to make the width of the element 20%, instead of 19%. Hope this helps
__________________
This is my code. Is it not nifty? "The biggest problem encountered while trying to design a system that was completely foolproof, was, that people tended to underestimate the ingenuity of complete fools." ---Douglas Adams Join the Itsacon fanclub! Zero Tolerance: Spammers banned so far: 275
 
|
|
#3
July 13th, 2006, 03:06 PM
|
||||
|
||||
|
IE pre and possibly including 7 doesn't support the 'table-cell'
value of 'display'. You should 'float' the divs.
__________________
Sinthetic - Alternative UK Hiphop: What's the worst that could happen?
|
|
#5
July 18th, 2006, 05:02 PM
|
|||
|
|||
|
Try this...
I ran into this same problem and used 19.95% seems to work...
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.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">
<!--
html,body{height:100%; margin:0px; padding:0px; }
#container{
width:100%;
height:100%;
float:left;
border:none;
}
#container #aColm{
width:20%;
height:100%;
background-color:#FF00FF;
float:left;
border:none;
}
#container #bColm{
width:20%;
height:100%;
background-color:#00FFFF;
float:left;
border:none;
}
#container #cColm{
width:20%;
height:100%;
background-color:#FFFF00;
float:left;
border:none;
}
#container #dColm{
width:20%;
height:100%;
background-color:#0000FF;
float:left;
border:none;
}
#container #eColm{
width:19.95%;
height:100%;
background-color:#00FF00;
float:left;
border:none;
}
-->
</style>
</head>
<body>
<div id="container">
<div id="aColm">Colm One</div>
<div id="bColm">Colm Two</div>
<div id="cColm">Colm Three</div>
<div id="dColm">Colm Four</div>
<div id="eColm">Colm Five</div>
</div>
</body>
</html>
|
|
| Viewing: Dev Articles Community Forums > Web Design > Advanced Web Development > 5 divs inside one div, help!! |
| Thread Tools | Search this Thread |
| Display Modes | Rate This Thread |
|
|
 |
|
|
Del.icio.us
Digg
Google
Spurl
Blink
Furl
Simpy
Y! MyWeb
Linear Mode
