<header> tag divs are breaking layout

I am trying to get my website to look like this.

Here is the coded page so far:
http://pokerslice.net/problem/index.html

I have a div (#banner) that contains the banner background image, the white gradient.
Basically this rests inbetween the top <nav> tag and the bottom <nav> tag (the blue one)

#banner is acting like a wrap I guess.
Within #banner I have another 2 divs:

  • 1 contains the H1 and P tags (#heading - I made this a green background to explain this easier)
  • 1 contains the 3 social icons for twitter/facebook/google. (#social)
    I then close the banner div.

I am trying to move #heading 10px downwards within the #banner div, so I have some space and I can position it like in the screenshot.

Everytime I type margin-top: 10px on this div, the whole <header> tag moves down 10px and there is a white gap at the very top of the page.

I tried padding but it didn’t do anything.

I then added position: absolute to the header tag, but it messed everything up.
I then did trial and error and put in the absolute function on the navigation tag, giving relative to the other ones, but I couldn’t get it to work.

Basically I want the #heading div to move freely within the #banner div when I use margin tops or paddings etc.

I would REALLY appreciate it if someone could help me out as I have been stuck for an hour now and I am ready to break something.

Ok I added
#banner position relative
#banner .heading position absolute

the heading div now moves freely using margins within #banner which is what I want.
the only problem now is that the top navigation menu and my social icons div have completely dissapeared out of site.

nobody knows?

Hi,

the only problem now is that the top navigation menu and my social icons div have completely dissapeared out of site.

Why are you expecting this to show something? It’s not linking to real images, and there’s no styles on those elements.


<div id="social">
	<ul id="social">
		<li> <img src="x" /> </li>
		<li> <img src="x" /> </li>
		<li> <img src="x" /> </li>
		</ul>
	</div>	
</div>

A few things,
Validate your HTML, Use an ID only once, use double quotes for attributes.

In your CSS there’s a lot of repetition.
Avoid settings widths/heights on everything (width:1024px), that only needs to be on the #container, everything else with display:block will be 100% wide by default.

I got it fixed by adding a float:left to one of the divs.

Thanks for the advice.

I now have another problem:

http://pokerslice.net/help/index.html

I have ABSOLUTELY no idea how to fix this.

  1. When I hover over an image I have a css style to remove the border.
    If you hover over the 4th image the whole layout breaks.

  2. When I hover over an image, the text underneath won’t stay static, it will move with it.

  3. The rating DIV won’t display under the Price div, but instead beside it.

If anyone can look through my code and see what is wrong I would really appreciate it.

I have tried adding random overflow:hidden and clear:both to all the divs using trial and error for a solution but nothing worked.



* { margin: 0; padding: 0; }
body { font: 14px/1.4 Georgia, serif; background: grey;}

article, aside, figure, footer, header, nav, section { display: block; }


#s_offers {  /* container */
width: 620px;
margin: 20px 10px 10px 40px;
}


#s_offers  h3 {
color:white;
text-indent:240px;
}

.s_offers_header{
width: 620px;
min-height:30px;
background-image: url(images/header.png);
}

.s_offers_box{
width: 618px;
height:auto;
background: #ffffff; /* Old browsers */
background: -moz-linear-gradient(top,  #ffffff 60%, #cdcccc 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(60%,#ffffff), color-stop(100%,#cdcccc)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #ffffff 60%,#cdcccc 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #ffffff 60%,#cdcccc 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #ffffff 60%,#cdcccc 100%); /* IE10+ */
background: linear-gradient(top,  #ffffff 60%,#cdcccc 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#cdcccc',GradientType=0 ); /* IE6-9 */
border-left:1px solid black;
border-right:1px solid black;
border-bottom:1px solid black;
overflow:hidden;

}

.s_offers_cont{ /* product box */
float:left;
width:143px;
min-height: 130px;

padding: 10px 5px 20px 5px;
}

.s_offers_img{
width:140px;
background-color:white;
border: 1px solid grey;
}

.s_offers_img:hover{
width:140px;
background-color:white;
border: 0px solid green;
}

h4.s_offers_name{
font-size:14px;
color:black;
overflow:hidden;
margin-top:2px;
}

.s_offers_price{
font-size:11px;
text-align:left;
font-weight:bold;
color:grey;
height: auto;
float:left;
overflow:hidden;

}

.s_offers_rating{
font-size:10px;
overflow:hidden;
float:left;
}


.view-button{
background:red;
padding: 2px;
font-size:11px;
color:white;
font-weight:bold;
border: 1px solid black;
margin: 2px 2px 0 0;
float:right;
font-family:century gothic;



}


The trick is never to change layout (font-size, border) etc on hover. Why do you have 0px solid green?


.s_offers_img:hover{
width:140px;
background-color:white;
border: 0px solid green;
}

If you want to remove the border then give it the same color as the background.


.s_offers_img:hover{
width:140px;
background-color:white;
border-color: white;
}

Your attachment never went through. It is better to post a link to the image. Still, while I guess at your actual desired layout this was my solution to your original post.

This should be what you want (not that your markup as well as your CSS was in error).


<!DOCTYPE html>
<html>

<head>
	<meta charset='UTF-8' />
	
	<title>Test</title>
<!--[if IE]>
		<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
	<![endif]-->

	<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js'></script>

	<script src='js/example.js'></script>
<style type="text/css"> 
* { margin: 0; padding: 0; }
body { font: 14px/1.4 Georgia, serif; background: grey;}

article, aside, figure, footer, header, nav, section { display: block; }

li  {list-style: none;
float:left;}


#container {
width:1024px;
background: green;
margin: 0 auto;
overflow:hidden;
}
header {overflow: hidden; background: #fff}
#nav_top {
background:url(images/navtop.png) left bottom repeat-x #efefef;
overflow: hidden;
}
#nav_top ul{
font-size: .75em;
float:right;
margin-right:15px
}
#nav_top li{
float:left;
padding: 10px 5px;
}
#banner {
background: url(images/banner.png);
width:1024px;
height: 141px;
margin-top:10px;
}
#banner .heading {
background: green;
width:500px;
float:right;
}

#nav_main {
background: url(images/navmain.png) repeat-x;
border-top: 1px solid #3b3b3b;
border-bottom: 1px solid #3b3b3b;
overflow: hidden;
}
#nav_main li{padding:5px;}
</style>	
</head>

<body>
	<div id="container">
		<header>
			<nav id="nav_top">
					<ul>
						<li>Home</li>
						<li>About</li>
						<li>Contact</li>
						<li>FAQ</li>
					</ul>
			</nav>
			<div id="banner">
				<div class="heading">
						<h1>Title Here</h1>
						<p>I want this box 10px below the top navigation menu</p>
						<p>Margin-top 10px breaks the page</p>
				<!--heading--></div>
						<ul id="social">
						<li> <img src="x" /> </li>
						<li> <img src="x" /> </li>
						<li> <img src="x" /> </li>
						</ul>
			<!--banner--></div>
		</header>
			<nav id="nav_main">
					<ul>
					<li>Bestsellers</li>
					<li>Bestsellers</li>
					<li>Bestsellers</li>
					<li>Bestsellers</li>
					<li>Bestsellers</li>
					</ul>
			</nav>
		
		<div id ="maincontent">
		<!--maincontent--></div>	
	</div> <!-- Container -->
	
	
</body>

</html>

If you want the green part back on the left… just remove float:right; from #banner .heading.

DO NOT use absolute position to position elements unless absolutely (pun) necessary, as it takes the element ENTIRELY out of the normal flow ( as if it wasn’t there at all) and thus could wreck your page OR force you to explicitly size other elements. What you encountered is called margin-collapse. As you mentioned the effect is solved by floating. You can also resolve the issue by adding a pixel borer or a pixel padding between elements. Most recently I have discovered that overflow:auto on the parent element will also resolve this.

Which leads me to ADDITIONAL TIPS:

  1. DONT set FONT-SIZE in PX!! bad for accessibility
  2. Slice your images as small as possible and use repeat, repeat-x, or repeat-y
  3. ID are supposed to be unique
  4. As IDs are unique you can streamline your CSS … .someClass div #myID is kinda redundant #myID will do
  5. Avoid giving elements heights.

With regards to your hover states, Mark’s post is a good solution. But more gracefully would be to simply set border-color:transparent on the :hover rule.

Remember Borders and padding add size to your elements. so if you remove border or padding you are effctively changing the computed actual size of the element.

Thank you for the help I really appreciate it!

I have a couple of questions:

  1. Why is font size in PX bad? I remember reading that PX was preferred over EM (which was preferred in older browsers)
  2. So I should only use 1 DIV ID per document? In some tutorials I watched on lynda/tutsplus they were using multiple divs in a document.

“4) As IDs are unique you can streamline your CSS … .someClass div #myID is kinda redundant #myID will do”

I have no idea what you mean by this, could you please explain?

  1. Why did you use overflow:hidden on the container, header, and nav div’s?

  2. Element heights, If I need something to be a certain size should I use min-height instead?

Should I be using “em” for everything, including margins etc?

Thanks

I quickly changed border colour and changed the height of the product container to 204px.

http://www.pokerslice.net/help/index.html
http://www.pokerslice.net/help/style.css

When I zoom in and out of the page, the layout still breaks, product #5 pushes itself way to the right hand side and a 3rd row is made for the following products.

Edit: I fixed this by changing the s_offers_container div from min-height to height but you said to avoid placing heights on elements, so what is my solution here?

Also - the rating text won’t align under the price text, sometimes it will align itself on the same line depending on zoom settings on the browser.

The rating text needs to have clear:left added if you always want it on a new line.


.s_offers_rating {
    clear: left;
}

Overflow:hidden is often used on static container to contain the floated children (see css faq on floats).

When you float a series of elements they will float as high as they can so when the floats wrap to the new line they will snag if one float is higher than another which is why height works to stop this. However that means that content may be cut off if some elements need to be taller. You could set the height in ems to allow fro text resize but the same issue will occur if some descriptions are longer than others.

Instead of floating you could use display:inline-block instead and then the element will always wrap to a new line without snagging.

So simple! Thank you very much.

I don’t have clear:left on the other divs such as s_offers_price and s_offers_name.
I guess it would be good to include them in those divs for safety?

Thanks for the additional info, guess I have more tutorials to go through.

I am just reading up on em’s right now.

It says that em’s get their default value from the body font size.

So if body { font-size:10px }

then 1 em is 10px by default.

But if we have a div that has an em size defined for the font, all other styles using em’s in that div will be relative to it’s font size.
ie. div1 {font-size:2em; margin-top:1em}
the margin-top will be 20px as it’s saying “your font size is 2ems, i’ll take 1 of that”.

What I don’t understand is using this with margins accurately, if I want to use a margin top by about 1px in that div, does that mean I will have to use margin-top:0.1em?

Is that the correct way of doing things, instead of margin-top:1px?

I am trying to replace all the coding in my site with all div classes and em’s now so it would be great if someone can tell me if I am looking at this right as the tutorial I am watching doesn’t cover that.

Ok I just designed a new layout hoping to make it cleaner and the use of more div classes and em.
http://pokerslice.net/help/new.html
http://pokerslice.net/help/new.css

Some more questions:
I am now using em for font size.
For padding should I also use em or stick to pixels?


.nav_top li {
padding-left:1em;
}

What is the benefit of doing this over px?

I checked and zoomed in and out of my page but couldn’t notice any difference.

If anyone else has any more suggestions on how to make my coding better I would really appreciate it!

Can anyone guess my advice? Yup, that’s right… Step one, ditch the HTML 5 nonsense as non-viable for production deployment… letting you lose the stupid javascript shiv too.

Step 2, Lose all the wrapping tags for NOTHING – where you have header, don’t put a div, you don’t need it. HEADER, NAV, etc, are ‘wrappers for nothing’, a waste of markup, and why as a rule I think HTML 5 contains some of the dumbest concepts this side of deep fried manure. “Problems” with HTML 5 in it’s current state are akin to the old joke “Doctor, Doctor, it hurts when I do this…”

There’s little good reason (apart from presentational nonsense masquerading as semantics) to be using a whole lot more markup than:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html
	xmlns="http://www.w3.org/1999/xhtml"
	lang="en"
	xml:lang="en"
><head>

<meta
	http-equiv="Content-Type"
	content="text/html; charset=utf-8"
/>

<meta
	http-equiv="Content-Language"
	content="en"
/>

<link
	type="text/css"
	rel="stylesheet"
	href="screen.css"
	media="screen,projection,tv"
/>

<title>
	Test
</title>

</head><body>

<div id="pageWrapper">

	<h1>
		Title Here
		<small><span> - </span>Your #1 Resource Guide</small>
	</h1>
	
	<ul id="topMenu">
		<li>Home</li>
		<li>About</li>
		<li>Contact</li>
		<li class="last">FAQ</li>
	</ul>
				
	<ul id="social">
		<li><img src="images/placeholder.png" alt="describe image here" /></li>
		<li><img src="images/placeholder.png" alt="describe image here" /></li>
		<li><img src="images/placeholder.png" alt="describe image here" /></li>
	</ul>
	
	<ul id="mainMenu">
		<li>Bestsellers</li>
		<li>Bestsellers</li>
		<li>Bestsellers</li>
		<li>Bestsellers</li>
		<li>Bestsellers</li>
	</ul>
	
	<form action="#" method="GET" id="topSearch">
		<fieldset>
			<input type="text" name="q" id="searchQuery" />
			<input type="submit" value="Search" />
		</fieldset>
	</form>
	
	<div id="content">
	<!-- #content --></div>

<!-- #pageWrapper --></div>

</body></html>

I’m on the road at the moment, but when I’m back at my workstation I’ll belt out some CSS to show you what I mean.

Hmm you made that look so simple and easy, just when I thought I was getting the hang of things…

Yes I would really love to see the CSS, I thought you would need to put each element such as the header, twitter buttons, navigation in their own divs to position them and have more control!?

I tend to keep padding and margins in pixels unless it is critical to the overall dimensions and to avoid rounding errors. I actually don’t like that padding should get wider/smaller when the text is resized although it does retain the same relationship. Using margins in ems is awkward because a 2em margin on an h1 is not the same as 2em margin on a p element with a different font-size.

Defining widths/heights (where appropriate) in ems is desirable but often you will want a min or max pixel (or percenatge) width to go with it to stop things going too wide.

If you hang on a bit Jason (deathshadow) will give you a pretty bulletproof layout to follow.

That’s the rub, and why HTML5 really is pointless bloat – H1 is a perfectly good semantic container that already HAS a meaning… until you hit a H2, everything after it should be considered the ‘header’ of the whole page. UL is a perfectly good semantic container that already has meaning – it’s a list… since it’s a list with anchors in it, a list of choices… like say some form of navigation. (though NAV is uselessly vague, EVERY anchor on a page is “navigation”, so is scrolling up and down)

… and just like DIV – and here’s the kicker – H1 and UL are PERFECTLY GOOD BLOCK LEVEL CONTAINERS, meaning anything you can do to a DIV, you can do to them!

Back at the workstation now, I’ll have that CSS in a few minutes.

Ok, here’s what I came up with:

http://www.cutcodedown.com/for_others/rubbed/template.html

as with all my examples the directory:

http://www.cutcodedown.com/for_others/rubbed/

is wide open for easy access to the bits and pieces.

Keeping the markup simple combined with the image interaction on the background resulting in something I loathe to do – PX fonts on pretty much everything; but that’s the header and the menu where it’s forgivable as the only people that will break for are the Firefoxtards who still use the outdated ‘text only’ resize like they were still using Nyetscape 4 – which beats the tar out of it breaking for large font/120dpi users; as a rule of thumb you support one or the other, not both the moment images are on the table. Besides, if the folks using that setting aren’t used to layouts breaking when they use that pathetic attempt at content sizing by now… There’s a reason it’s no longer the default behavior.

Pretty much what we have here are layered sections positioned using negative margins – I place the H1 first, with a bottom margin equal to it’s height. This rides that first menu up over it, then our floated #social falls into place on the side, then the main menu, and finally the form gets a negative top margin to ride it up over the main menu. It’s easier to use vertical-align to get the form relatively uniform cross-browser, but don’t plan on it EVER matching. (like firefox screwing it up by 1px from the top while no other browser does so…) Also, I’d stick with the classic text input and “search” button instead of any stupid half-assed javascript trickery there. It’s clean, it’s simple, it works.

Though I guessed a bit on the appearance and assumed those backgrounds were supposed to repeat full screen width… I put it on BODY for now – if you ‘need’ body for another background, I’d put a sandbag div (empty div with just an id on it) before #pageWrapper with a negative bottom margin equal to it’s height, to ride #pageWrapper up over it, and put the background there.

I also put in a number of tags you were missing. Playing games with layout before you have ALL of your markup written semantically is a flawed approach to design… If you write as much of the content as is going on the page marked up semantically before you even THINK about trying to do layout with your CSS, you will end up debugging less as you add them in – like the anchors in that top menu; adding them can shift everything… or the form and fieldset around inputs; I see people putting them into ‘draft’ templates all the time, then having to go back and waste time debugging after.

Oh, and I gave it a light touch of CSS3 and some hover states just to make it pretty, and made it semi-fluid width.

You might wonder about the use of such large fonts on everything – since it basically has to resort to px fonts, start out big, that way nobody can complain about it being too small. The content area as always should remain %/em for accessibility reasons, but on menus and headings you can play a bit fast and loose so long as you make it big enough.

Tested working on IE 5.5 through 9, FF 3.52 and latest, and the latest flavors each of Opera, Saffy and Chrome. Valid XHTML 1.0 Strict, would be valid CSS if not for a few IE specific fixes.

Hope this helps, any questions fire away.

Wow…

Thank you very much for spending your time doing it has helped enormously.

The trick with using a small bit of the image and repeating it instead of using 3 separate background images is seriously cool, would not even have thought of that.

I am going to experiment with this coding offline and I’ll report back with some questions as I am sure I will have a few.
This is a completely different way of coding than I am used too so it will take a bit to get my head around.

And agree with the advice about writing all the markup first, definitely learnt my lesson with that.

Thanks a lot once again!

No problem, I’m retired from doing this stuff full time, and prefer to teach what I know to others anyhow.

One of the things you WON’T see in most books or tutorials is a discussion of how too many files can make a page take longer to load. It’s called “handshaking” – every time your browser has to request another file from the server it has to send “do you have this”, get back from the server “Yup, got it, here’s what I know about it” and then send a “fine, send it to me”… each direction of travel on that is about equal to ping time, so typically anywhere from 30ms to a full on second. A “real world” average for handshaking is considered to be 200ms (a fifth of a second) … so regardless of how big the files are, 16 files have an approximate 3.2 seconds of overhead for people with fast connections, but could be upwards of 48 seconds on slow connections. Browsers and servers can handle multiple requests at once, but this is typically only four to eight at once, and on busy connections (like the internet at Panera Bread or Starbucks) the ‘connection limit’ can prevent that savings… as a rule of thumb I calculate 75% the total file count times 200ms as the ‘low end’ and 50% the total file count times 1 second as the high end… so a page with say… 48 separate files ends up 6.4 seconds as a ‘low latency’ connections and 24 seconds on a ‘high latency’ one – REGARDLESS of how big the files actually are! That’s JUST the overhead on requesting all the files, not counting actually transferring the data!

Which is why ‘image recombination’ techniques to use one file instead of many is a VERY common optimization method, and one I try to practice from the start. Using a method people now call “CSS Sprites” (after sprite tiles, an incorrect usage of the term since the result is NOT a sprite!) those three social networking images could be similarly combined into a single file, with the background ‘slid around’ so as to reveal just the part you want.

It’s a very powerful technique and one I suggest learning as early on as possible – with the caveat that like anything else it’s NOT a be-all end-all solution.

I think you’ll find the approach simpler just because it’s “Use semantic markup to say what things are”, “Use as little and as simple a markup as possible” combined with “Build the page using the painters algorithm to layer one thing over another”. The CSS can get a bit complex, but it also means that you can have MULTIPLE CSS targets easily because again, if all you are designing for is ‘desktop screen’ you’re missing the point of HTML and the Internet.

It’s also about starting out with the bare minimum – HTML, and slowly adding the newer technologies on top of it. It’s called “progressive enhancement” and by doing so should any of the improvements – images, CSS, Scripting – be unavailable for whatever reason, the page will ‘gracefully degrade’; basically remaining fully functional and usable. All the ‘improvements’ you layer on top of HTML should be there to ENHANCE the page, without supplanting functionality. (A concept lost on most people vomiting up pages with scripting these days).

Load up that example page in Opera, turn on the ‘real’ menu (Opera button -> show menu bar), and try view -> images -> no images… hey look, all the theme itself loses is the gradients… Then try “view -> style -> user mode” to disable CSS… the logical document structure means a clean and simple, but fully functional page. (author mode re-enables css).

It’s why progressive enhancement is one of the cornerstones to good site building.