CSS Dynamic Left/Right column Static Width

Question

The problem is, i have a background in two parts.

Background Image #1
Background Image Repeats (endlessly) #1
Background Image #2
Background Image Repeats (endlessly) #2

In css you cant create a background by just sticking elements on it like so:

#leftColumn {
    background-image:url('http://i53.tinypic.com/2ezlb7n.png');
    background-repeat:no-repeat;
    background-position:right top;
    background-z-index:1;    

    background-image:url('repeat.png');  
    background-repeat:repeat-x;  
    background-z-index:0;
}

What I want the result to be:

[ BACKGROUND LEFT ]
[ CONTENT ] 
[ BACKGROUND RIGHT ]

The content should always be 768px. The background on both sides should show as much as possible.

I can't believe it, but i was able to solve it myself. This is the code that made it possible:

<style type="text/css">
* {
    padding:0px;
    margin:0px;
}

html, body {
    width:100%;
    height:100%;
    background-color:#333333;
}

#leftColumn {
    background-image:url('http://i54.tinypic.com/aa83lw.png');  
    background-repeat:repeat-x;  
    display:none;   
}

#rightColumn {
    background-image:url('http://i52.tinypic.com/kcjdwi.png');  
    background-repeat:repeat-x; 
    display:none;   
}

#leftImage {
    background-image:url('http://i53.tinypic.com/2ezlb7n.png');
    background-repeat:no-repeat;
    background-position:right;
    width:100%;
    height:128px;
}

#rightImage {
    background-image:url('http://i56.tinypic.com/noh6on.png');
    background-repeat:no-repeat;
    width:100%;
    height:128px;
}

#content {
    width:768px;
    background-color:#666666;
}

@media only screen and (min-width:769px) {

    #leftColumn, #rightColumn {
        display:table-cell;
    }

}

</style>

<table width="100%" height="100%">
<tr>
    <td id="leftColumn" align="right"><div id="leftImage"></div></td>
    <td id="content">&nbsp;</td>
    <td id="rightColumn" align="left"><div id="rightImage"></div></td>
</tr>
</table>

What's the purpose of the left and right blocks? If it's just for adding in a background, please say so - I can give you an alternate design that works more easily than this. And like @jimplode suggests, this deign won't have any tables. You don't want/need them for this. — Surreal Dreams
– Surreal Dreams, Commented Feb 23, 2011 at 16:39
I understand your problem from a horizontal point of view, but I have no idea what you want to happen vertically. For instance, is that green bar aligned to the bottom of the page? The bottom of the viewport? — thirtydot
– thirtydot, Commented Feb 23, 2011 at 16:45
You guys are the best! I have been trying so hard to figure this out, hope you will be able to find a solution. The background is not necessary for the site content, but if the space is available because the screensize is larger then 768px it should show as much background as possible. — Mark
– Mark, Commented Feb 23, 2011 at 16:47

Surreal Dreams · Accepted Answer · 2011-02-23 16:51:44Z

2

I think you're wanting to have a content area in the center with a background that spans the width no matter how wide it runs.

The HTML:

<div id="wrapper">
    <div id="content">your center content goes here</div>
</div><!-- close wrapper -->

The CSS:

#wrapper {
    background: #FFF url(/images/widebackground) repeat-x center top;
}

#content {
    margin: 0 auto; /*centers div - change the 0 if you want a different top margin*/
    width: 768px;
}

This will repeat your background horizontally. It will be centered in the window. If your image is wide enough (4000px, maybe?) you're unlikely to see it repeat on any display without several monitors. You can also set a color for any areas not covered vertically, or visible through transparent areas. I set this to #FFF, but you can choose your color or leave it out.

Here's a jsfiddle demonstrating what I am suggesting. I changed a few things (colors, content size) to make it more visible, but the key parts are still there.

answered Feb 23, 2011 at 16:51

Surreal Dreams

26.5k4 gold badges49 silver badges61 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

jimplode Over a year ago

This is how I would do it for backgrounds.

Mark Over a year ago

Wow jsfiddle is nice!! I will try and make an example there of my problem. The thing is the background consists of a couple of elements that makes it difficult. (1) Left and right should have different background images. (2) Left and right have and image and a repeating image that just repeats untill the entire screen is filled.

jimplode Over a year ago

Then the only other way of doing it is with javascript and set the element widths dynamically.

Mark Over a year ago

Do you know how to make this? <DIV1 DYNAMIC WIDTH><DIV2 CONTENT WIDTH=768><DIV3 DYNAMIC WIDTH>. So that if the screen would be 1024 it will automaticly make DIV1 and DIV2 about 128px

jimplode · Accepted Answer · 2011-02-23 17:23:15Z

0

This will do it in ff, but does not work in Chrome, sarafi or IE.

So is probably no good for you!! :)

<html>
<head>

<style>
    body
    {
        display:table;
        width:100%;
        padding:0px;
        margin:0px;
    }
    .centre
    {
        display:table-cell;
        height:400px;
        width:768px;
        text-align:left;    
        margin:0px auto;
        position:relative;
        background-color:#FF0000;
    }
    .left
    {
        display:table-cell;
        background-color:#00FF00;
    }
    .right
    {
        display:table-cell;
        background-color:#0000FF;
    }
</style>

</head>
<body>
    <div class="left"></div>        
    <div class="centre">
        <p>This is the centre content</p>
    </div>
    <div class="right"></div>


</body>
</html>

edited Feb 23, 2011 at 17:23

answered Feb 23, 2011 at 16:46

jimplode

3,5104 gold badges28 silver badges44 bronze badges

5 Comments

Mark Over a year ago

The left and right part are not absolute 100pixels in width. They should fill the empty space on the left and right side of the content.

Mark Over a year ago

Copy my (wrong) code and see what it does when you make the screen smaller, it will cut the background image more as you make it smaller.

Mark Over a year ago

I will create a better example, one sec.

jimplode Over a year ago

yeah, just realised that. Is this simply for the background?? As you can do that as a background image on the body.

Mark Over a year ago

Ah I just noticed you edited the code, ye I am looking in Chrome and Safari and there it does not work. See that's the reason i am using tableview cause it works in all browsers :-)

Collectives™ on Stack Overflow

CSS Dynamic Left/Right column Static Width

2 Answers 2

4 Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related