Sat, 2003-08-02 06:15
I am certainly doing something stupid and I can't figure out what it is. This is the page I am working on: http://www.techsatcomputers.com/PostHits/
The CSS for the page is:
<style type="text/css">
<!--
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: normal;
color: #333333;
background-color: #FF9933;
}
#container {
text-align: center;
}
#centered {
width: 759px;
margin-left: auto;
margin-right: auto;
border: thick solid #000000;
}
#header {
background-color: #6EA8E2;
margin: 0px;
padding: 0px;
height: 100px;
width: 100%;
}
#subHeader {
background-color: #339BCC;
margin: 0px;
padding: 0px;
height: 25px;
width: 100%;
border-top-width: medium;
border-bottom-width: medium;
border-top-style: solid;
border-bottom-style: solid;
border-top-color: #000000;
border-bottom-color: #000000;
vertical-align: middle;
}
#navigation {
color: #333333;
background-color: #99CC33;
margin: 0px;
padding: 0px;
height: 1000px;
width: 150px;
border-right-width: medium;
border-right-style: solid;
border-right-color: #000000;
position: relative;
left: 0px;
z-index: 200;
top: 0px;
}
#content {
color: #333333;
background-color: #FFFFFF;
margin: 0px;
padding: 0px;
height: 1000px;
width: 100%;
z-index: 100;
position: relative;
top: 0px;
right: 0px;
}
-->
</style>
I am trying to get the white background(content div) behind the navigation div an on the same level vertically. I know I have to put some margin on the content div so that my text doesn't get hidden behind the navigation div, but I want to first get them both on the same level. I don't want to use float right or left as it has margin issues(I think). Anyone ?
[Edit...] I have temporarily used float for the moment... would there be an alternative solution ?
Sat, 2003-08-02 11:11
#1
Divs on same level ?
ok I put in a float to the navigation div and now my styles look like:
#navigation {
color: #333333;
background-color: #99CC33;
margin: -33px 0px 0px;
padding: 0px;
height: 1033px;
width: 150px;
border-right-width: 3px;
border-right-style: solid;
border-right-color: #000000;
position: relative;
left: 0px;
z-index: 200;
top: 0px;
float: left;
}
#content {
color: #333333;
background-color: #FFFFFF;
margin: 0px;
padding: 0px;
height: 1000px;
width: 100%;
z-index: 100;
position: relative;
top: 0px;
right: 0px;
}
The page looks good on Mozilla with no bugs so far. IE 6 is playing up. There is a 2px gap horizontally and vertically. Could this sorted out with the box model hack ? or is it something lelse I am missing ?
Sat, 2003-08-02 11:30
#2
Divs on same level ?
Hi paCkeTroUTer,
It's best to avoid hacks whenever you can, they may come back to haunt you in the future.
I'm pretty keen on floating so I floated the content, added a clearing div and removed the xml tag from the before the doctype.
Seems to work consistently in ie 6, Netscape 7, and Opera 7.
Hope that helps.
Sat, 2003-08-02 14:11
#3
Divs on same level ?
Thanks Tony, that helped. Could you explain what the clearing Div does. Is it a bug-fix or standard coding practice ?
Sat, 2003-08-02 15:30
#4
Divs on same level ?
paCkeTroUTer wrote:
Is it a bug-fix or standard coding practice ?
Tony's going to have to answer your question for sure, but I sure hope it's considered standard practice. I came up with the exactly the same solution on my own about 3 days ago after beating my head trying to figure out the W3C specs. Since they were my source for how I could use "clear", I'm thinking we're OK. It's just that they didn't provide the specific example Tony provided and I was lucky enough to conjecture.
For the information of others, here's the code:
<div style="clear:both;"></div>
Tue, 2003-08-19 04:57
#5
Divs on same level ?
hehe Tony must have missed this one 
Tue, 2003-08-19 08:26
#6
Divs on same level ?
Sorry paCkeTroUTer,
I did miss this one, sometimes I only have time for a quick look at the forums and forget to go back for a closer look later. Might have to look at a bookmarking mod.
Clear is used a lot with floating to clear the horizontal space either side of an element that is floating. It stops elements from overlapping.
I'll try and post an example after dinner.
Tue, 2003-08-19 08:54
#7
Divs on same level ?
Tony wrote:
Sorry paCkeTroUTer,
I did miss this one, sometimes I only have time for a quick look at the forums and forget to go back for a closer look later. Might have to look at a bookmarking mod.
Thats kewl mate... maybe I'll going hunting for something(MOD)... call me the MOD man
Tony wrote:
Clear is used a lot with floating to clear the horizontal space either side of an element that is floating. It stops elements from overlapping.
I'll try and post an example after dinner.
Thanks, I get the idea now
Tue, 2003-08-19 11:59
#8
clear
Back to another question I passed over earlier on standards.
Quote:
Having an empty html element on the page may be semantically incorrect. <div style="clear:both;"></div>
Similar to having a blank spacer image it contains no meaningful data and is used purely for positioning.
It would not in my opinion, breach any standards or be considered a hack.
Attached is a very basic example of floated divs and clear.
Floats are pretty useful in web development.
What I like is the way they drop to the next line when there is not enough room to fit in the current line.
You should change the size of your browser display area to see what I mean.