/    Sign up×
Community /Pin to ProfileBookmark

3 columns with background image

Copy linkTweet thisAlerts:
Nov 09.2009

I was struggling since morning a simple CSS layout. I can’t figure out. Please help!

Here is the code:

[CODE]
<html>
<style type=”text/css”>

body
{
background-color: #EFEFEF;
}

#wrapper { width:100%; float:left; }

#left { width:auto;
background: url(‘left.gif’) left repeat-x;
float:left;
}

#right {
width:auto;
background: url(‘right.gif’) right repeat-x;
float:left;
}

#main {width:980px;
margin-left:auto;
margin-right:auto;
float:left;
}

</style>
</head>

<body>

<div id=”wrapper”>

<div id=”left”></div>

<div id=”main”><p>main</p></div>

<div id=”right”></div>

</div>

</body>
</html>

[/CODE]

I want to achieve like the officedepot left and right shaded area with thick border on right and left of 1st and 3rd column. 2nd (center) to display content. Can this be done?

to post a comment
CSS

6 Comments(s) ↴

Copy linkTweet thisAlerts:
@mordaukNov 09.2009 — It sounds like what you're really trying to do is have one area for content that is centered on the page, and then have two areas of equal width on either side of this content area that have a background color/image.

If so, here's your code:

[CODE]
body {
background: #EFEFEF;
}
#main-content {
margin: 0 auto;
width: 960px;
background: url('background-image.gif') repeat-y;
}
[/CODE]

Rather than create two empty columns for the left and right background images, just combine the images into one background image and apply it to the main content div.
Copy linkTweet thisAlerts:
@codingisfunauthorNov 10.2009 — I did some tweaking and there is a small issue with this code. Left and Right image show up but the right image is not aligned to the left image.

[CODE]
<head>
<style type="text/css">

body
{
background-color: #EFEFEF;
}

#main {
margin: 0 auto;
width: 960px;
}

#left {
height: 100%;
padding: 15px;
background: url('wrap1.gif') top left repeat-y;

}

#right {
height: 100%;
padding: 15px;
background: url('wrap2.gif') top right repeat-y;
}

</style>
</head>

<body>
<div id="main">
<div id="left">
<div id="right">
<div>
Main Content here
</div>
</div>
</div>
</div>

</body>
</html>

[/CODE]

[upl-file uuid=db629bf9-a774-4bd2-84ac-3296b756b73e size=3kB]wrap1.gif[/upl-file]

[upl-file uuid=ca4fb81b-2aa0-4f61-a988-a72e5fed179b size=3kB]wrap2.gif[/upl-file]
Copy linkTweet thisAlerts:
@mordaukNov 10.2009 — What do you mean it's not aligned to the other? Is it higher or lower on the page?

If you could post a screenshot or a direct link, it'd be helpful.
Copy linkTweet thisAlerts:
@codingisfunauthorNov 10.2009 — Screenshot is attached.

[upl-file uuid=6bc8cba2-b88f-49a5-b8c9-57d15efa485e size=30kB]sample.JPG[/upl-file]
Copy linkTweet thisAlerts:
@mordaukNov 10.2009 — Add float: left; and float: right; to the left and right divs.
Copy linkTweet thisAlerts:
@codingisfunauthorNov 10.2009 — I added Float: left and Float: right, still the result is same.
×

Success!

Help @codingisfun spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 6.16,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @nearjob,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,
)...