'float'ing format [Closed]

Picture this:

Code:

---

body
{
width:400px;
height:600px
}
left
{width:100px
height:200px
}
header
{
width:300px
height:200px
float:right
}

---

(#left is now positioned upper left corner and #header is floating to the right of #left side by side)
now when this is added...

Code:

---

main
{
width:300px
height:200px
}

---

Why does #main end up overlapping #header? Unless otherwise specified via "Positioning", the #main should keep its place under header shouldn't it? Unless 'float' causes #header to become 'absolute' but that doesn't make any sense...

You're talking about the CSS ID's "left", "header" and "main"? If so, you have to use CSS ID selectors with a leading "#" in your stylesheet rules:

Code:

---

#left { ... }
#header { ... }
#main { ... }

---

"float" removes an element from the normal flow, which means all content following that, will automatically move up.

actually i found an issue w/it. if you input this css:

Code:

---

#left
{
        width:200px;
        height:600px;
        border:1px solid #000000;
}
#header
{
        width:595px;
        height:200px;
        float:right;
        border:1px solid #000000;
}

#main
{
        width:596px;
        height:200px;
        border:1px solid #000000;
}

#footer
{
        border:1px solid #000000;
}

---

You see that the main column overlaps both the header as well as the left column... this doesn't make any sense seeing that #left is standard, but #main ignores its existence... as well as the float command making the header seem 'absolute' and ignoring its existence as well... why does it do that? now add:

Code:

---

#left
{
        float:none
}

---

it still positions the main column under the left column... now isn't the main column's position defined by the header?
Now add

Code:

---

#left
{
        float:left
}

#main
{
        float:right
}

---

the footer gets thrown to the top of the page. I understand that float takes it out of its normal flow, but it's not absolute positioning so why is the footer overlooking the existance of the header, left/main columns?

so 3 different questions on this post

i know this seems trivial, and it's not a problem for me cause I've found how to fix it, it's just that I'm just trying to figure out how its attributes effect the template and how it flows just to get a better understanding of how CSS works. Thanks for your time in reading/answering this post!

~Mecha

without a site example link, this is pointless, as it could simply be a browser problem... why are you using your own CSS? surely you can use the Contao CMS Css standard framework and modify that. I've never had a case, where I could not just use the standard framework.

*sigh* nvm