A better way to code this layout?

Get Started
1

Hey all,

I haven’t coded in months and I think it’s showing with this quick design I want to create. It looks bloated and unnecessary…

I think what I am trying to do is self explanatory if you view the link below, but basically I want to divide the page up into a number of 100% width (and a set height) rows that all have different backgrounds. Then inside those rows is a 960px wide div that would house content unique to that div.

You can see it here: http://jsfiddle.net/xetYg/

Is there a better way to do this? Open to all ideas.

Thanks,
Ben

2

Hi bChandler (love that TV show, if your name suggests what I think it does, if not, ignore me), welcome to Sitepoint!

Your link isn’t loading for me. It eventually times out :(.

3

Hi Ryan, thanks for the quick reply.

No no that’s my name lol What show are you referring to?

Yeah looks like jsfiddle is down - I uploaded to my site: (http://monsterplayground.com.au/blah/)

4

[ot]I thought you had Chandler Bing, from Friends (an American TV show)[/ot]Well the HTML is fine, I guess. Hard to know without having actual content in it. Your CSS uses a huge Eric Meyer reset, which is ok, but I’d trim it down a bit. It’s fine as is though…

You have some HTML5 in your CSS, aka the tags…I’d get rid of it. You have no need to be using HTML5 to begin with. There is nothing HTML5 offers over HTML4 that is worth it.

#wrapper {    min-width: 960px;
    margin:0 auto;
    height: 1000px; /* change this later */
    background: #f3f3f3;
}


#top-menu {
    height: 87px;
    background: #25064d;
}


#homepage-slider {
    height: 400px;
    background: #36175e;
}


#homepage-video {
    height: 357px;
    background: #553285;
}


#footer {
    height: 267px;
    background: #fff;
    border-top: 1px solid #d0d0d0;
}


.wrap960 {
    margin: 0 auto;
    width: 960px;
    background: #f3f3f3;
    height: 100%;
}



You had some typos in there, I cleaned it up. Also some useless stuff like “width:100%;margin:0 auto;” which basically does nothing. Given the fact I don’t know what your layout will be, I changed it up the best I could. I’d have this code.I left the height you had set on stuff because I HOPE you will not let that happen in the final product :). Also for <div>'s you should know that display:block is default value. Also, that width:100% set on a block element essentially does nothing. Width:auto is the default and does the same ting really. There are exceptions but you’ll know it when you see it :).

5

Ah yeah i thought it was referring to that show lol

Thanks mate - that all makes sense :slight_smile: Pretty much cleaned up the unnecessary code.

What do you mean by

I left the height you had set on stuff because I HOPE you will not let that happen in the final product
?

6

In the CSS I posted, there is still (for example) something like height:300px. I left that in and didn’t remove it. I do hope when you start coding hte page more, you won’t have heights set on everything. That’s bad :).

7

Why? I want set heights because I have a specific height background image…

8

You can set a min-height, but don’t restrict the height.

Are you sure content won’t make it reach 300px height (for example)?

9

Yes I’m sure :slight_smile: Set heights are required.

Thanks for sanity checking my stuff man :slight_smile:

10

At least I warned ya :). You’re welcome. Feel free to ask more q uestions in the future, should you have any

11

<yoda>and that is why you fail…</yoda>

Such design concepts are NOT viable for web deployment if you care at all about accessibility, usability, and a whole host of other important factors in building a website.

On the whole I can’t comment too much on your layout concept partly because it’s presentational markup, but more because you seem to have a slew of pointless wrappers and no actual content to build your layout around… which until you have semantic markup of your content – or at least a reasonable facsimile of said content – you have little if any business trying to build the layout.

Much less the clearfix nonsense, inner DIV with widths on them for no fathomable reason, and of course the HTML 5 for nothing nonsense with the shiv javascripted garbage.

Don’t know what you’re actually trying to do, but I’m pretty sure it’s not good. I mean you’re just endlessly nesting and restating the same values over and over again for no real reason… DIV are automatically display:block – DIV automatically expand to fit what they’re in… adding borders to them make them BIGGER than the container you have them in, breaking the layout…

well over half your DIV should be pitched in the trash as pointless… pretty much every one of those ‘wrap960’ serve no purpose besides wasting code. All the display:block you have need to go, you don’t have any floats that need clearing and when you do, just apply overflow and a haslayout trigger to it’s parent without adding that stupid presentational clearfix class nonsense to the markup, get rid of the heights you don’t need so that flow adds up to your total height, (case in point everything inside your #wrapper adds up to more than the 1000px you declared)…


body {
	background:#eeeeee;
}

#wrapper {
	margin:0 auto;
	min-wight:960px;
	background:#f3f3f3;
}

#top-menu {
	height:87px;
  background:#25064d;
}

#homepage-slider {
	height:400px;
	background:#36175e;
}

#homepage-video {
	height:357px;
	background:#553285;
}

#footer {
	height:267px;
	background:#fff;
	border-top:1px solid #d0d0d0;
}

Should be all you need to be setting there. The rest of it is pointless.

12

LOL I love how you both comment on a design you know nothing about nor do you know anything about the brief. You see a simple bit of code and let your imagination and opinion run free.

Much less the clearfix nonsense, inner DIV with widths on them for no fathomable reason, and of course the HTML 5 for nothing nonsense with the shiv javascripted garbage.

Again your commenting on a small snippet of the overall code (that you haven’t seen).

I appreciate your feedback but chill out and don’t comment on things that you are don’t know the full extent of - you don’t have a crystal ball to see what the end product must look like so don’t pass judgment or advice blindly. Perhaps I should have been a little clearer to prevent users jumping to conclusions - my mistake.

All I really wanted to know was the div within div was acceptable. It looks like it is :wink:

13

We wouldn’t have to make guesses about your design or code, if you gave us more information. We are making educated guesses, and really just warning you about the pitfalls of what we believe may be going on.

In the future, if more information is given, we can adjust our advice accordingly :).

14

Hence:

If it serves a purpose - usually it doesn’t but we can’t tell that without seeing the content you’re going to plug into them. Content should dictate layout, so until we see the content (or a reasonable facsimile) and the semantic markup for it we can’t tell if you should have ANY of those DIV.

BUT, even without the content there is No reason to be saying display:block; width:100% on a DIV – since they are block level elements that start out as display:block and default to width:auto – meaning they’ll expand to 100% anyways; unless for some weird reason you need a haslayout trigger on them – and since they’re not position:relative or have any funky margin tricks on them it seems unlikely.

But you really hit it on the head with your last post - you gave us a small incomplete snippet; all we can do is make a few educated guesses and point out things in what you have that don’t seem to serve a purpose and/or could lead to broken layouts. Things like declaring fixed heights on everything instead of letting flow do it’s job! Of course for flow to do it’s job you need content in there.

15

Thanks guys - appreciate the feedback. Will be a little clearer with the feedback I specifically need.