Div’s inside div’s with a full width repeating background

[Konnor]

So I’m wondering how to code my layout.

I’m familiar with quite simply coding it like this……..

Design mockup with no columns

Naturally there would be more div’s than I’ve shown. I would then use a class to center elements in the page, whilst having the background patterns extend the whole width of the div/screen.

However, I was wondering, considering everything from the slider down to the footer is lined up in 2 columns, should it be more like this?

Design mockup with columns

But, can this work with the backgrounds I have? Would I put the column div’s within the slider div? If so I can’t see how I could get my slider background pattern to work without applying it all the way down the page.

Which method would you choose? Or would they be an even better method for coding a layout like this?

Many thanks!

[wolfcry911]

combine the graphic in the green and white divs and repeat it horizontally on the body. Then, I’d have a header section, sub header, and finally main content area. I wouldn’t utilize two column divs until the main content area.

[Konnor]

Ah interesting. I’m guessing the loading speed is going to be better with one image, as oppose to seperate background images for the header and slider?

[dfogge]

i would personally go with the first option to ensure the different sections could grow smoothly if more content needed to be added in the future. but that’s just me.

[jstam]

My thinking is do a hybrid of both. Lay your 2-column grid layout inside each of the div’s that control the background. If you structure your CSS well you’re not looking at a ton of additional markup.

[Konnor]

@jstam so I could perhaps use classes for the left and right columns? Then apply that to where I need to in the slider and main content?

This is what I have currently for the slider section….

Welcome




Chilli Con Salsa is Norwich's premier destination for Cuban Salsa Dancing




Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla magna turpis, tempor posuere elementum at, bibendum sit amet felis. Sed et mollis lorem. Cras id arcu odio. Nunc tinc

cAlign is the class that centers everything into my 960px width. “sliderLeft” will be floated left, the image will be floated right.

I’m thinking “sliderLeft” could instead become a “left” class, to also be used in the main section.

Is it okay and good practise to modify a class throughout your CSS?

Like so….

.left {

width: 580px;

float: left;

}



div#slider .left {

/**Some CSS**/

}



div#slider .left h3 {

/**Some CSS**/

}



div#slider .left p {

/**Some CSS**/

}



div#mainContent .left {

/**Some CSS**/

}

Thanks!

[jstam]

@Konnor Yeah, I’d say you’re on the right track there.

Create the style declarations for the generic .left and .right, then customize as you need them with higher specificity inside your parent containers (#slider in this case).

[Konnor]

Great. Cheers fella.

I assume that would also be a good option with an eye to making it responsive, so you can change the column widths easily.

[Author]

Posts