css nested divs style

J

julian_m

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>
 
J

Jim Moe

julian_m said:
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?
Click to expand...
Not without an URL showing a test case. Code fragments are useless.
 
J

Jim Moe

julian_m said:
It was not a code fragment, it was the *complete* code. Anyway, you can
see what i'm talking about here:
Click to expand...
No, it was not. The </head> without <head> was just the first error.

Correct your code:
- Add a DTD (doctype, preferably HTML 4.01 Strict) and charset spec.
- Change widht -> width in the CSS.
- Add a width:xx% to each column. The default width for a block element is
100%.
- Add float:left to each column. The columns will not float unless you
tell them to do so.
 
J

julian_m

Jim said:
julian_m wrote:
No, it was not. The </head> without <head> was just the first error.
Click to expand...

ahhh, yes, ok.
Correct your code:
- Add a DTD (doctype, preferably HTML 4.01 Strict) and charset spec.
Done

- Change widht -> width in the CSS.
Click to expand...

What a silly mistake !!!
- Add a width:xx% to each column. The default width for a block element is
100%.
Ok


- Add float:left to each column. The columns will not float unless you
tell them to do so.
Click to expand...

But, if I have two divs inside another, and float one of them to left,
should the 2nd one float to left as well?

I mean
<div>
<div>50% width float to left</div>
<div>This one should "automatically" stay on the right, or not?</div>
</div>

Well, actually, thanks your advice, the page renders better than
before, but now I dont know ...
why the childs divs (#izq and #der) don't fit inside the parent div
(#ppal) ?

thanks in advance - jm
 
J

Jim Moe

julian_m said:
But, if I have two divs inside another, and float one of them to left,
should the 2nd one float to left as well?
Click to expand...
No. Why would it? If you do not tell it to float, it won't. There is no
"Well, my neighbor is floating. I think I will, too."
why the childs divs (#izq and #der) don't fit inside the parent div
(#ppal) ?
Click to expand...
They do fit. Just not the way you envision.
You have no normal content in #ppal. All content is floated and as such
is removed from the normal flow. Thus the #ppal's height is zero.
Here is a way to get #ppal to wrap the floated divs:
..clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
Add clearfix to ppal: <div id="ppal" class="clearfix">
See <http://www.positioniseverything.net/easyclearing.html> for a
complete discussion.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Help with Visual Lightbox: Scripts 2
Help me sort out this script 1
Working on mobile css menu with plenty of frustration! 2
Why is the e.target not working here? 1
Positioning CSS components 1
How can I get my menu inside of a menu to function properly? 1
Need help , Having problem with Drag n Drop ? 9
Need help , Having problem with Drag n Drop... 1

Members online

No members online now.
Total: 25 (members: 0, guests: 25)
Robots: 322

Forum statistics

Threads
473,755
Messages
2,569,536
Members
45,007
Latest member
obedient dusk

Latest Threads

Top