|
|
Posted by julian_m on 03/08/06 07:40
I want to make a page which should have 3 columns, all of them whith
the same with. I tried to do with css, but it seems that i'm confused
about nested divs, and their style.
For instance, the #col1 div should have 50% of the with of its parent's
widht (which is 66%) but it actually renders 50% of the screen's width.
How the width-parent_with thing works in css ?
Another weird thing that happens (at least to me given that i expected
another beavior), is that #der div is taller that its parent's height
(#ppal)
Can anyone give me some explanation about that?
regards - jm
That's the small example I made:
------------------------------------------------
</head>
<body>
<div id="ppal">
<div id="izq">
<div id="col1">
columna 1 columna 1 columna 1 columna 1 columna 1 columna 1 columna
1 columna 1 columna 1 columna 1 columna 1 columna 1 columna 1 columna 1
columna 1 columna 1 columna 1
</div>
<div id="col2">
columna 2 columna 2 columna 2 columna 2 columna 2 columna 2 columna
2 columna 2 columna 2 columna 2 columna 2 columna 2 columna 2 columna 2
columna 2 columna 2 columna 2
</div>
</div>
<div id="der">
columna 3 columna 3 columna 3 columna 3 columna 3 columna 3 columna 3
columna 3 columna 3 columna 3 columna 3 columna 3 columna 3 columna 3
columna 3
</div>
</div>
</body>
</html>
and this is the style
<style type="text/css">
#ppal{
border-left:5px solid black;
border-right:5px solid black;
border-top:5px solid black;
border-bottom:5px solid black;
clear: both;
width: 100%;
padding: 0;
margin: 0;
background-color: white; /* visual effect only */
}
#izq{
border-left:5px solid blue;
border-right:5px solid blue;
border-top:5px solid blue;
border-bottom:5px solid blue;
position:relative;
float: left;
width: 66%;
/*text-align: center;*/
padding: 0;
margin: 0;
}
#der{
border-left:5px solid red;
border-right:5px solid red;
border-top:5px solid red;
border-bottom:5px solid red;
}
#col1{
border-left:5px solid yellow;
border-right:5px solid yellow;
border-top:5px solid yellow;
border-bottom:5px solid yellow ;
background-color: white;
float: left;
position:relative;
widht: 50%;
padding: 0;
margin: 0
}
#col2 {
border: solid #ffffff 10px;
background-color: yellow;
text-align: center;
}
</style>
Navigation:
[Reply to this message]
|