View Full Version : XHTML / CSS Problem. Can't solve myself!

12-26-2006, 02:46 AM

Whilst designing my latest website I have come across a little problem which I can't figure out.

link to website: http://www.skinground.com

Basically, I have 2 content boxes on the right hand side. They do not touch each other where they should the bottom content box infact doesn't budge up to it vertically.

In this image you will see what I mean:


The arrows show which way the lower content box (The problem) should go. The red line indicated where the content box should rest.

I don't have any type of margin on the upper box and I have tried various other things. I have a strong idea that it could be to do with the
clear: both/left/right;
attribute though but where.. I do not know.

If anyone has any input or say on this matter please tell me! Anything helps I want to crack this anoying issue asap! Thanks!!

12-26-2006, 03:35 AM
I noticed there was no float:left; on your login divs, maybe you should try putting a float:left; on those and see what happens

12-26-2006, 06:27 AM
Hello Nickgod99,
You can't re-use div id's like that. An id only gets used once on a page, change the name or make it a class.
Have a look at the validator (http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.skinground.com%2F)

I'm don't know if fixing those errors will stop your content from dropping but it'll be a good start.

12-26-2006, 04:11 PM
I have fixed everything the validator tells me to fix. Still get the problem :(

12-26-2006, 04:39 PM
Your code isn't very clean and well structured. You should use a real list for the menu on the left. Plus you don't group your divs that belong together (like the menu items or the boxes on the right) in a container div which would make styling easier.

The gap is occuring because that content comes after the menu in the source code and so you need to float everything that is on the left side (e.g. the advertising space) to the left. Again, if you would put the entire menu in one container div it would be easier because you wouldn't have to apply the float to all those elements but just one (also saving classes in the HTML).

12-26-2006, 04:49 PM
Could you possible tell me which classes and such need what changing?

12-26-2006, 05:12 PM
Yeah, trying to do this it reveals the flaws of your HTML structure.
Try to add this and see what happens:

<div style="float: left;">
<div class="login_bg">
<div class="main_content_text">
<form id="form2" name="form2" method="post" action="login.php">
<input name="textfield" type="text"></label>
<input name="textfield" type="text"></label>
<input name="Submit" value="Submit" type="submit">
<div class="ad_bg">
<div class="main_content_text">Space for Advertisement</div>

It makes the title of the main content go up a little (in my Fx 2) but still, because the section title, the section body (skin preview), and all related elements are separate (not grouped within one big container) it's probably not really fixing things. You need to structure your markup properly, e.g. like so:

<div id="container">
<div id="topsection">(welcome message and announcements)</div>
<div id="menu">(menu, login are, and ad space)</div>
<div id="mainsection">(main content)</div>

And the titles of each box should actually be headlines (<h1>-<h6>), as that's what they are there for, hence the boxes could look like this:

<div class="box">
<h2>Box Title</h2>
<div>(box content, can be text, images, tables, or whatever)</div>

All this is part of semantic HTML (http://www.thefutureoftheweb.com/blog/2006/2/writing-semantic-html) which is a lot easier to style than a thousand poorly placed single divs.

12-26-2006, 05:15 PM
That really helped thanks alot man.

12-26-2006, 05:32 PM
Hi again.

I have put my content into two containers, one floating left and one floating right.


margin: 0px;
padding: 0px;
float: right;
float: left;
margin: 0px;
padding: 0px;

I have also changed my html around. Putting the latest skins box under the main one.

But.. the left menu has fallen below it in Firefox. IE looks abit better.

Whats the problem?

12-26-2006, 07:31 PM
I think your still doing what VIPStephan pointed out, the order of your HTML is wrong.
You have #wrapper3 then your menu items then #skin_container (which is missing a > )

I think you need to re-ordering everything starting from the top down to get it all to lay right. I tried moving a few things around with the developer tools in FF but right from the start, at least at the top of #wrapper3, there are problems.