/    Sign up×
Community /Pin to ProfileBookmark

CSS dynamic columns

Copy linkTweet thisAlerts:
Jun 08.2007

Hi, I’m trying to move away from table based design to more CSS div based design. The problem I’m having is trying to setup a layout that is static and percentage. For instance with table based I could have a layout that had a right bar that was static and a left bar that was static, but the middle, where the content was, could be percentage based:

[code=html]
<table width=100% border=1>
<tr>
<td width=”150px”>right bar</td>
<td>Content Section</td>
<td width=”150px”>left bar</td>
</tr>
</table>
[/code]

I’m trying to use CSS positioning to somehow emulate the same thing. Anyone have any suggestions?

to post a comment
CSS

5 Comments(s) ↴

Copy linkTweet thisAlerts:
@toicontienJun 08.2007 — This works for me in Firefox:
[code=html]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Static side bars, CSS layout</title>
<style type="text/css" media="screen">
<!--
#footer {
background-color: #ccf;
clear: both;
}

#mainContent {
background-color: #cff;
float: left;
width: 100%;
}

#primarySideBar {
background-color: #ffc;
float: left;
margin-left: -150px;
width: 150px;
}

#secondarySideBar {
background-color: #fcf;
float: right;
margin-right: -150px;
width: 150px;
}

#colWrapper {
background-color: #fcc;
margin: 0 150px;
}
-->
</style>
</head>
<body>
<div id="wrapper">
<div id="colWrapper">
<div id="primarySideBar">&nbsp;</div>
<div id="mainContent">&nbsp;</div>
<div id="secondarySideBar">&nbsp;</div>
</div><!-- end colWrapper -->

<div id="footer">&nbsp;</div>
</div><!-- end wrapper -->
</body>
</html>[/code]
Copy linkTweet thisAlerts:
@CentauriJun 08.2007 — Sure, there are a few variations on this. Some examples are here and here
Copy linkTweet thisAlerts:
@toicontienJun 08.2007 — And my code revised to work in IE-Win:
[code=html]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Static side bars, CSS layout</title>
<style type="text/css" media="screen">
<!--
#footer {
background-color: #ccf;
clear: both;
}

#mainContent {
background-color: #cff;
float: left;
width: 100%;
}

#primarySideBar {
background-color: #ffc;
float: left;
margin-left: -150px;
position: relative;
width: 150px;
}

#secondarySideBar {
background-color: #fcf;
float: right;
margin-right: -150px;
position: relative;
width: 150px;
}

#colWrapper {
background-color: #fcc;
margin: 0 150px;
}

-->
</style>

<!--[if IE]>
<style type="text/css" media="screen">
#primarySideBar,
#secondarySideBar {
display: inline;
}
</style>
<![endif]-->

</head>
<body>
<div id="wrapper">
<div id="colWrapper">
<div id="primarySideBar">&nbsp;</div>
<div id="mainContent">&nbsp;</div>
<div id="secondarySideBar">&nbsp;</div>
</div><!-- end colWrapper -->

<div id="footer">&nbsp;</div>
</div><!-- end wrapper -->
</body>
</html>[/code]
Copy linkTweet thisAlerts:
@timdentyJun 08.2007 — Once you've chosen a method you like, it would be worth using overflow:hidden on your fluid-width center div. This will hide any unsightly, overlapping content which becomes to large to display if the window size is too small for it.
Copy linkTweet thisAlerts:
@hobeauauthorJun 08.2007 — awesome! that was just what i was looking for. Thanks guys!
×

Success!

Help @hobeau 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.17,
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,
)...