Hi there,
I'm currently starting to move my site away from tables and into the pretty seach engine friendly world of divs and css, but I'll hit a small snag which is probably quite trivial (I hope)
Here's my current layout in tables
<!-- w --><a class="postlink" href="http://www.spiraloz.com">www.spiraloz.com</a><!-- w -->
1 column, 3 rows, header, navigation, content. inside content is another 2 column table.
here's my attempt at the same layout using divs and css
<!-- w --><a class="postlink" href="http://www.spiraloz.com/divlayout.htm">www.spiraloz.com/divlayout.htm</a><!-- w -->
if you look at the code you'll see the div tags with the id #sidebar and #contentarea are inside the #container2 div tag, but they seem to just overlap all the other divs. I want #sidebar and #contentarea to nest inside #container01 and #container02
Hope I explained that ok, I have searched around and found a few similar issues with solutions like clear:both and a div tag with 1px height just before closing the container, but they didn't seem to work.
This issue occurs on both Firefox and IE6
oh and by the way, is that a practical way to center my main container? just putting a div with center align around it?
Cheers,#sidebar
{
width: 170px;
float: left;
/*position: absolute;*/
padding: 5px;
left: 0px;
}
.clear{
clear: both;
height: 1px;
margin-top: -1px;
}
After looking at it again, as far as i can tell you don't need any of the position:relative;s or the align: center. See attached source for updates.Scleppel beat me to it, but I have floated the contentarea right instead
Tables layout :- <!-- m --><a class="postlink" href="http://validator.w3.org/check?verbose=1&uri=http%3A//www.spiraloz.com/">http://validator.w3.org/check?verbose=1 ... raloz.com/</a><!-- m -->
CSS layout:- <!-- m --><a class="postlink" href="http://validator.w3.org/check?verbose=1&uri=http%3A//www.spiraloz.com/divlayout.htm">http://validator.w3.org/check?verbose=1 ... layout.htm</a><!-- m -->
This tag style is required <style type="text/css"> but your coding is more like XHTML Transitional than HTML4.01
I have put a version up for you to take and play with at
<!-- m --><a class="postlink" href="http://www.minervawebs.co.uk/divlayout.htm">http://www.minervawebs.co.uk/divlayout.htm</a><!-- m --> (Now removed as you have solved your problem )
because the reply on here would have been far too long. Basically, you are still thinking in tables, the div align:center is not needed, you can use margins on a container div to centre your page. You also need to have a good look at positioning, sometimes it just not necessary, with semantic mark up you can make use of the document flow.
You will see that I have adjusted your html to xhtml strict because it was almost there (according to HTML Tidy) and added a wrapper div, so that you will be able to put a footer div within it to contain that below the container02, but within the whole.
I mostly work with fluid design, so my pixels are a bit haphazard so you will have to adjust them to your liking eg.
#container01
{
width: 640px;
border: 1px solid #000000;
margin-right: auto;
margin-left: 10%;}
Finally to get your watermarky image to show I gave container02 a background-color of white as well, because it was inheriting the body background colour.
The css is now in a linked file, which you can grab as /test.css at the above address.
HTHwow cool, thanks guys, my site will be table free in no time.
I also found this handy little tutorial in my googling travels
<!-- m --><a class="postlink" href="http://www.quirksmode.org/css/clearing.html">http://www.quirksmode.org/css/clearing.html</a><!-- m -->
just another way around it I guess, and yeah after testing out what is mentioned on the above URL I ended up taking away the positioning.
well 3 answers is better than one eh
Cheers guys
PS
after just messing with Speedbird and Scleppel's fixes, they seem to be superior, the solution in the URL I provided for some reason omits the container02 background in firefoxhmm,
ok speedbird I'm using your code at present, it seems the sidebar is the only div that effects the height of the container2 div, contentarea still overflows where the sidebar ends. I've had a bit of a fiddle but I only messed it up a little more, how do I go about setting it up so that both the #contentarea and the #sidebar can nest inside the containers? I'm using dynamic data so one can't say which column will be the biggest at all times.As well as the float clearing tutorial above, you might like to tuck this away for future reference.
<!-- m --><a class="postlink" href="http://www.positioniseverything.net/easyclearing.html">http://www.positioniseverything.net/easyclearing.html</a><!-- m -->
It's a "21st century clear:fix" method, which is excellent and I have used this to sort out a knotty float problem fine. But hey, take your time to make the mistakes - that's how we all learn.
Just seen your latest - Try floating the sidebar now. You will maybe need the clearfix above to go with it now
Ok, ended up using a mix of speedbird and scleppel's code,
scleppel's extra clear class seemed to sort out the content area overflowing and I'm still using speedbird's wrapper and taking out the contentarea's width.
anyhoo here's the finish product
<!-- w --><a class="postlink" href="http://www.spiraloz.com/futureindex.php">www.spiraloz.com/futureindex.php</a><!-- w -->
css file <!-- w --><a class="postlink" href="http://www.spiraloz.com/spiraloz.css">www.spiraloz.com/spiraloz.css</a><!-- w -->
works very well, just ignore the code on the content for now haven't fixed all that yet
thanks again guysLooks good, but be aware that if the code doesn't validate it can throw errors in browsers.Code is now validated
<!-- w --><a class="postlink" href="http://www.spiraloz.com">www.spiraloz.com</a><!-- w -->
and it's now live, yay
however I've just found a bug in the nav bar for IE5 Mac but that's for another thread
I'm currently starting to move my site away from tables and into the pretty seach engine friendly world of divs and css, but I'll hit a small snag which is probably quite trivial (I hope)
Here's my current layout in tables
<!-- w --><a class="postlink" href="http://www.spiraloz.com">www.spiraloz.com</a><!-- w -->
1 column, 3 rows, header, navigation, content. inside content is another 2 column table.
here's my attempt at the same layout using divs and css
<!-- w --><a class="postlink" href="http://www.spiraloz.com/divlayout.htm">www.spiraloz.com/divlayout.htm</a><!-- w -->
if you look at the code you'll see the div tags with the id #sidebar and #contentarea are inside the #container2 div tag, but they seem to just overlap all the other divs. I want #sidebar and #contentarea to nest inside #container01 and #container02
Hope I explained that ok, I have searched around and found a few similar issues with solutions like clear:both and a div tag with 1px height just before closing the container, but they didn't seem to work.
This issue occurs on both Firefox and IE6
oh and by the way, is that a practical way to center my main container? just putting a div with center align around it?
Cheers,#sidebar
{
width: 170px;
float: left;
/*position: absolute;*/
padding: 5px;
left: 0px;
}
.clear{
clear: both;
height: 1px;
margin-top: -1px;
}
After looking at it again, as far as i can tell you don't need any of the position:relative;s or the align: center. See attached source for updates.Scleppel beat me to it, but I have floated the contentarea right instead
Tables layout :- <!-- m --><a class="postlink" href="http://validator.w3.org/check?verbose=1&uri=http%3A//www.spiraloz.com/">http://validator.w3.org/check?verbose=1 ... raloz.com/</a><!-- m -->
CSS layout:- <!-- m --><a class="postlink" href="http://validator.w3.org/check?verbose=1&uri=http%3A//www.spiraloz.com/divlayout.htm">http://validator.w3.org/check?verbose=1 ... layout.htm</a><!-- m -->
This tag style is required <style type="text/css"> but your coding is more like XHTML Transitional than HTML4.01
I have put a version up for you to take and play with at
<!-- m --><a class="postlink" href="http://www.minervawebs.co.uk/divlayout.htm">http://www.minervawebs.co.uk/divlayout.htm</a><!-- m --> (Now removed as you have solved your problem
)because the reply on here would have been far too long. Basically, you are still thinking in tables, the div align:center is not needed, you can use margins on a container div to centre your page. You also need to have a good look at positioning, sometimes it just not necessary, with semantic mark up you can make use of the document flow.
You will see that I have adjusted your html to xhtml strict because it was almost there (according to HTML Tidy) and added a wrapper div, so that you will be able to put a footer div within it to contain that below the container02, but within the whole.
I mostly work with fluid design, so my pixels are a bit haphazard so you will have to adjust them to your liking eg.
#container01
{
width: 640px;
border: 1px solid #000000;
margin-right: auto;
margin-left: 10%;}
Finally to get your watermarky image to show I gave container02 a background-color of white as well, because it was inheriting the body background colour.
The css is now in a linked file, which you can grab as /test.css at the above address.
HTHwow cool, thanks guys, my site will be table free in no time.
I also found this handy little tutorial in my googling travels
<!-- m --><a class="postlink" href="http://www.quirksmode.org/css/clearing.html">http://www.quirksmode.org/css/clearing.html</a><!-- m -->
just another way around it I guess, and yeah after testing out what is mentioned on the above URL I ended up taking away the positioning.
well 3 answers is better than one eh
Cheers guys
PS
after just messing with Speedbird and Scleppel's fixes, they seem to be superior, the solution in the URL I provided for some reason omits the container02 background in firefoxhmm,
ok speedbird I'm using your code at present, it seems the sidebar is the only div that effects the height of the container2 div, contentarea still overflows where the sidebar ends. I've had a bit of a fiddle but I only messed it up a little more, how do I go about setting it up so that both the #contentarea and the #sidebar can nest inside the containers? I'm using dynamic data so one can't say which column will be the biggest at all times.As well as the float clearing tutorial above, you might like to tuck this away for future reference.
<!-- m --><a class="postlink" href="http://www.positioniseverything.net/easyclearing.html">http://www.positioniseverything.net/easyclearing.html</a><!-- m -->
It's a "21st century clear:fix" method, which is excellent and I have used this to sort out a knotty float problem fine. But hey, take your time to make the mistakes - that's how we all learn.
Just seen your latest - Try floating the sidebar now. You will maybe need the clearfix above to go with it now
Ok, ended up using a mix of speedbird and scleppel's code,scleppel's extra clear class seemed to sort out the content area overflowing and I'm still using speedbird's wrapper and taking out the contentarea's width.
anyhoo here's the finish product
<!-- w --><a class="postlink" href="http://www.spiraloz.com/futureindex.php">www.spiraloz.com/futureindex.php</a><!-- w -->
css file <!-- w --><a class="postlink" href="http://www.spiraloz.com/spiraloz.css">www.spiraloz.com/spiraloz.css</a><!-- w -->
works very well, just ignore the code on the content for now haven't fixed all that yet
thanks again guysLooks good, but be aware that if the code doesn't validate it can throw errors in browsers.Code is now validated
<!-- w --><a class="postlink" href="http://www.spiraloz.com">www.spiraloz.com</a><!-- w -->
and it's now live, yay
however I've just found a bug in the nav bar for IE5 Mac but that's for another thread