Problems I always run into

Hey,

Here are some situations where I end up adding more markup in order for it to work correctly. I’m looking for a better way of fixing these issues by possibly refactoring some of the HTML into a more standard way of the browsing rendering it correctly.

Situation #1


<!DOCTYPE html>
<html>

<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <style>
    .container { width: 800px; margin: 0 auto 0 auto; padding: 0; background:#ffffff;}
    .left { float: left; width: 300px; height: 300px; margin: 0; padding: 0; background: #00afff;}
    .right { float: right; width: 300px; height: 300px; margin: 0; padding: 0; background: #356e4f;}
    .auto { clear:both; width: 800px; height: 300px; margin: 25px auto 0 auto; padding: 0; background: #cc3d3d;}
    .clear {clear:both;}
    </style>
    
</head>

<body>

<div class="container">
    <div class="left"></div><div class="right"></div>
    
    <div class="auto"></div>
</div>

</body>
</html>

If you see auto class, it’s not pushing away from the floats. Even after clearing it.

The way I solve it is by either adding another div on top of the auto class with a “clear:both” or wrap both floats with another container.

I’m wondering why this doesn’t work as expect though.

Situation #2


<!DOCTYPE html>
<html>

<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <style>
    body{ margin:0;padding: 0;}
    .container { width: 800px; margin: 0 auto 0 auto; padding: 0; background:#000000;}
    .auto { clear:both; width: 800px; height: 300px; margin: 25px auto 0 auto; padding: 0; background: #cc3d3d;}
    .clear {clear:both;}
    </style>
    
</head>

<body>

<div class="container">
    <div class="auto"></div>
</div>

</body>
</html>

If you notice, auto class does not push off of container, instead, container class pushes off the body. That doesn’t even make any sense as to why it’s behaving that way.

The way I fix this is by: adding padding-top to the container, so that everything is always pushed off of it or use float positioning.

Is there something I can do in order for it behave nice?

:slight_smile:

You should always push down, for example use margin-bottom on your left and right divs… you could also use overflow:hidden on the auto div.

I’m self taught through trial and error, having not read any coding books I can’t tell you why it’s like that only through my years I have found top margins to fail sometimes and bottom margins to always do there asigned job. It’s most likely to do with margin-top: 20px pushing 20px off the above divs starting position despite it’s height, defined or not. Margin-bottom pushing off the bottom of the div and not the starting position…

overflow:hidden in your case will show the margin-top and not hide it behind the above div. As I say you can either use this or simply push down. Furthermore you don’t need auto margins on divs within a div of the same class, you could use IDs and combine the same code.

#container { width: 800px; margin: 0 auto; padding: 0; background: #ffffff;}
#container div.left, #container div.right { width: 300px; height: 300px; margin: 0 0 20px 0; padding: 0;}
#container div.left { float: left; background: #00afff; }
#container div.right { float: right; background: #356e4f;}
#container div.auto { clear:both; width: 800px; height: 300px; margin: 0; padding: 0; background: #cc3d3d;}

Why should I always push down?

Why would I use overflow:hidden on the auto div? I don’t want anything hidden.

I save IDs for javascript as I would most likely need the namespace for a js/ajax event and I try to repeat as much css as I can (using an ID more than once is not valid).

Thank you for the help.