[Solved] Appying background to floating divs

[copaesthetic]

How do you apply a repeating background to specific floating divs? I have designed a layout that includes a…

container
header
content_left
content_center
content_right
footer

However, I only want the repeating background to be applied to ONLY the content_left, content_center, content_right floating divs while simultaneously having the header and footer belong to the same container.

Code:

unwrapped studio is a print design boutique established by two creative individuals. Our mission is to transform your raw ideas into jaw breaking results…

• Printed Promotions
• Periodical Ads
• Posters

Code:

#header {
}

#container {
position : absolute;
left : 426px;
top : 253px;
background-image : url(navigation/wrapperRepeat.png);
background-repeat : repeat-y;
}

#content_left {
float : left;
margin-left : 37px
width : 361px;
}

#content_center {
float : left;
margin-left : 37px;
width : 272px;
}

#content_right {
float : left;
margin-left : 37px;
width : 272px;
}

#footer {
}

[Rob MacKay]

Just like you normally would… am I missing the real question?

Code:

#content_left, #content_right, #content_center {

background:url(“/your/image.jpg”);

}

[virtual]

Or you could enclose your 3 floating divs in another say #content-wrap and put your repeating background image in that instead of in the #container.

[copaesthetic]

Rob, I tried that but the background image only stays confined to the width of each floating div. This particular background has a drop shadow on the left and right, so applying it to all three doesn’t work out. Besides, the margins between those floating divs are empty. I need a single repeating background image to span the entire width of the content_left, content_center and content_right floating divs. Which brought me to try virtual’s suggestion….

Would this be the correct way to write a container within a container…

Code:

unwrapped studio is a print design boutique established by two creative individuals. Our mission is to transform your raw ideas into jaw breaking results…

• Printed Promotions
• Periodical Ads
• Posters

Code:

#header {
}

#container {
position : absolute;
left : 426px;
top : 253px;
}

#header {
}

#content_wrapper {
background-image : url(“navigation/wrapperRepeat.png”);
background-repeat : repeat-y;
}

#content_left {
float : left;
margin-left : 37px
width : 361px;
}

#content_center {
float : left;
margin-left : 37px;
width : 272px;
}

#content_right {
float : left;
margin-left : 37px;
width : 272px;
}

#footer {
}

Because I am not seeing any background image whatsoever!

[virtual]

You should not need absolute positioning for the #container and it has to have a width, and if you want it centered in the browser, write the css like this:

Code:

#container {
width: 1022px;
margin: 0 auto;
}

#header {
background: url(navigation/ridgesTop.png) no-repeat;
}

#content_wrapper {
background: url(navigation/wrapperRepeat.png) repeat-y;
overflow: auto;
}

#content_left {
float : left;
margin-left : 37px;
width : 361px;
border:1px solid red; /*The border is just so you can visualise the div*/
}

#content_center {
float : left;
margin-left : 37px;
width : 272px;
border:1px solid blue; /*The border is just so you can visualise the div*/
}

#content_right {
float : left;
margin-left : 37px;
width : 272px;
border:1px solid green; /*The border is just so you can visualise the div*/
}

#footer {
background: url(navigation/ridgesBottom.png) no-repeat;
}

[cramdesign]

I agree that wrapping those three in a div is the right approach. The reason that you see no background in the content_wrapper is because all of the contained divs are floated making their height essentially zero as far as content_wrapper is concerned. The old overflow trick will fix things…

Code:

#content_wrapper {
background: url(navigation/wrapperRepeat.png) repeat-y;
overflow: hidden;
}

That may not fixe everything but it will fix problem as it relates to the height of the div.

For the record, you should not use visually related id names… instead of left, center, right use name that indicate the type of content.

Code:

unwrapped studio is a print design boutique established by two creative individuals. Our mission is to transform your raw ideas into jaw breaking results…

• Printed Promotions
• Periodical Ads
• Posters

Of course you would need to change the css declarations if you do this.

[copaesthetic]

Thanks virtual and cram! It looks like all I needed to do was add the overflow rule to the content_wrapper div, both hidden or auto worked! One more question…

On that same page, I have a banner (masthead) that spans 1920px, but I don’t want the user to see a horizontal scroll bar if their resolution is smaller than that. So I added the rule overflow : hidden and it got rid of the horizontal scroll bar. The only problem remaining is that the page opens up on the left side, but the design is centered. How do I apply a rule to the body so that the page opens centered in the browser window and not align left?

PS. Cram I should know better to name my code using the content approach and not the visual approach, especially since I’m reading Transcending CSS! I’ll fix that habits soon enough.

Code:

Code:

body {
position : relative;
width : 1920px;
margin : 0 auto;
text-align : left;
text-align : justify;
overflow : hidden;
}

[cramdesign]

I am not entirely certain what you are asking. If you can post your work, probably I can take a look.

In general, as you likely know, to center a div you just use margin: 0 auto; but I don’t think that is what you are asking.

[copaesthetic]

My page is designed centered just like the one I linked you. The only difference is, when opened up on browser the first 1/3rd of the page is shown (the left side). What I want the viewer to see when they open my page is the second 1/3rd of my page (the center). Hopefully I’m making sense here.

[virtual]

If you look at the css for the site you will see the difference with yours. There is no width on the body tag and the image is positioned center:
background: transparent url(/images/truf_big_logo.png) no-repeat scroll center -1px;

Then the container is given a width and centered.

Does that make sense?

[cramdesign]

Take a look at that page’s css to see what is going on: http://trufcreative.com/wp-content/them … imized.css

Code:

html{background:url(/images/dots.png) repeat fixed;}
body{background:url(/images/truf_big_logo.png) no-repeat scroll center -1px;}

Odd enough, I didn’t even know that you could put a background on the html tag but apparently you can. Cool.

[copaesthetic]

Got it! Alright, I took a look at the example and I finally have the body and branding sections working out just fine. The only div that is not lined up is the #container div and its contents. I’m at a paradox, how do I define the y-axis of where the #container div begins while simultaneously applying the margin: 0 auto rule?

Like I said, everything is checking out fine. Its just that the #container div is now sitting under some elements, whereas when it was an AP div it was exactly where I wanted it positioned vertically.

Code:

body {
background-attachment: fixed;
background-position: 0 0;
background-repeat: repeat;
margin: 0 auto;
}

#branding {
background-attachment: scroll;
background-image: url(navigation/mainBanner.jpg);
background-position: center -1px;
background-repeat: no-repeat;
margin: 0 auto;
height: 305px;
}

#container {
width: 1069px;
margin: 0 auto;
}

[cramdesign]

What is the link to your working file? As for the y on the margin thing. Margin is like this:

Code:

margin: top right bottom left;

To remember this order, it is TRBL pronounced "trouble" which is what you will get if you don’t remember this. You can shorten this even more like so:

Code:

margin: (top and bottom) (left and right); or in our case margin: 0 auto;

This basically mean that top and bottom (y axis) is 0. If you want to bump it down a bit, say 50 pixels:

Code:

margin: 50px auto 0;

This would put 50 pixels at the top, auto on left and right for centering, and 0 at the bottom. Got it? (Ok, I know my examples are not code but I wanted to highlight them like they were.)

[copaesthetic]

Thanks alot cram, I was able to set the margin and the container dropped to what I had specified.

[Author]

Posts