3 Column CSS Layout - Resizeable Controls?
I've setup a 3 column layout for my web page using CSS. The page works well, and when I increase/decrease the width of browser window, the columns shrink accordingly, as I have a percentage assigned to each column width.
The problem is, I have controls within each column (or div). How do I make the controls grow/shrink in width whenever the browser window is made smaller or larger?
For example, in my left column I have a listbox control. When the browser window is adjusted to be more narrow the three columns shrink in width, but the listbox control stays the same size, so it encroaches on the middle column.
Basically, I'm trying to make the page grow/shrink based on the size of the browser window. The columns do, but the controls are the same size. When I try to set the width of a control using a percentage, it takes that as a percentage of the entire page, and not the <div> that contains the control.
Re: 3 Column CSS Layout - Resizeable Controls?
Quote:
When I try to set the width of a control using a percentage, it takes that as a percentage of the entire page, and not the <div> that contains the control.
Not seeing this occur when I try a quick example (instead the element interprets the percentage width from its parent's proportions). Can you post your markup and styles? Also, what browser are you using?
Re: 3 Column CSS Layout - Resizeable Controls?
I'm testing in IE 8.0. Here's the markup:
UPDATED TO SHOW MARKUP - MOST RECENT VERSION
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head><title>
Bed Board
</title><link href="Styles/Site.css" rel="stylesheet" type="text/css" />
</head>
<body>
<form method="post" action="Default.aspx" id="ctl01">
<div class="aspNetHidden">
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUKLTkxNzA4NDIzNGRkQgtJ7jLazMZTkBZkXzY0pb7GTBQJexhQ/uGemgHPJ/8=" />
</div>
<script src="/WebResource.axd?d=aeDmh_pkJEcmf3eH-VxpNv60KqT632VLkBpbi9471hiw9Uk4vHkWF6aZkWmmHCan--eLuVJ0gwd9eIEgL_jLeqEJa6d4wohRjy-ogp3ZjVU1&t=634461426062179293" type="text/javascript"></script>
<div class="header">
<div class="title">
<img id="Image1" src="ogo.jpg" style="height:58px;width:200px;" />
</div>
<div class="PageTitle">
<span id="Label1" style="color:#B71234;font-family:Arial;font-weight:bold;">Patient Flow Dashboard</span>
</div>
<div class="clear hideSkiplink" style="background-color: #00549F">
<a href="#NavigationMenu_SkipLink"><img alt="Skip Navigation Links" src="/WebResource.axd?d=_A1aDiYvqlQUPnPqqDihy33IGkchwYtBKTBO6cVAG_TUQVlKYtwsMhCUkIUvE1czfgVQ7x8Q0jWpCRKKD5WNC2D4uYCndzJi88YK4mYAdzg1&t=634461426062179293" width="0" height="0" style="border-width:0px;" /></a><div class="menu" id="NavigationMenu">
<ul class="level1">
<li><a class="level1" href="Default.aspx">Home</a></li><li><a class="level1" href="About.aspx">About</a></li>
</ul>
</div><a id="NavigationMenu_SkipLink"></a>
</div>
</div>
<div class="LeftCol">
<center>
<span id="LeftColContent_Label2" class="bodylabel">Housekeeping</span><br />
<select size="4" name="ctl00$LeftColContent$ListBox2" id="LeftColContent_ListBox2" class="ListBox">
</select>
<br />
<span id="LeftColContent_Label5" class="bodylabel">Pending Discharge</span><br />
<select size="4" name="ctl00$LeftColContent$ListBox4" id="LeftColContent_ListBox4" class="ListBox">
</select>
</center>
</div>
<div class="RightCol">
<center>
<span id="RightColContent_Label4" class="bodylabel">Inpatients in ER</span><br />
<select size="4" name="ctl00$RightColContent$ListBox3" id="RightColContent_ListBox3" class="ListBox" style="height:417px;width:340px;">
</select>
</center>
</div>
<div class="MiddleCol">
<center>
<span id="MiddleColContent_Label3" class="bodylabel">Current Patients</span><br />
<select size="4" name="ctl00$MiddleColContent$ListBox1" id="MiddleColContent_ListBox1" class="MiddleBox">
</select>
</center>
</div>
<div class="footer">
<span id="FooterContent_Label1" class="footerlabel">Website Designed by</span>
</div>
<script type='text/javascript'>new Sys.WebForms.Menu({ element: 'NavigationMenu', disappearAfter: 500, orientation: 'horizontal', tabIndex: 0, disabled: false });</script></form>
</body>
</html>
Re: 3 Column CSS Layout - Resizeable Controls?
For the markup, I was actually hoping to see the plain HTML. I never know if I'm using appropriate terms when talking .Net, but the markup that contains all those ASP server controls is not what the browser receives when it renders your page; .Net converts its proprietary tags into standard HTML tags prior to serving the document. CSS acts upon that finalized HTML, so [imo] it's best to look at that when dealing with CSS issues.
To get that final markup, you can load the page in a browser, right-click on an empty area of the page and select "View Source."
Re: 3 Column CSS Layout - Resizeable Controls?
I updated my last post containing code to the current "View/Source" copy you are looking for, so pls see code above.
I have the resizing working now for the left and right columns. In the centre though, I'm having issues. If I set the width to 90% it just takes up 90% of the width of the entire page. Also, if the page is made narrower, the middle box drops beneath the listbox in the left column.
Re: 3 Column CSS Layout - Resizeable Controls?
The markup you've posted is good now, but please also put the CSS back that you had posted before. Sorry if I was unclear about that in the above post.
Re: 3 Column CSS Layout - Resizeable Controls?
Quote:
Originally Posted by
SambaNeko
The markup you've posted is good now, but please also put the CSS back that you had posted before. Sorry if I was unclear about that in the above post.
You weren't being unclear, I was being daft. :rolleyes:
I'm not at work right now, but will post the CSS back tomorrow. Thanks for the help- hope you're around tomorrow.
Re: 3 Column CSS Layout - Resizeable Controls?
The CSS, as requested. Keep in mind I'm relatively new to this and I used the default CSS that you get when you fire up a new ASP project. So there may be unused elements etc.
Code:
/* DEFAULTS
----------------------------------------------------------*/
body
{
background: #b6b7bc;
font-size: .80em;
font-family: "Helvetica Neue", "Lucida Grande", "Segoe UI", Arial, Helvetica, Verdana, sans-serif;
margin: 0px;
padding: 0px;
color: #696969;
}
a:link, a:visited
{
color: #034af3;
}
a:hover
{
color: #1d60ff;
text-decoration: none;
}
a:active
{
color: #034af3;
}
p
{
margin-bottom: 10px;
line-height: 1.6em;
}
/* HEADINGS
----------------------------------------------------------*/
h1, h2, h3, h4, h5, h6
{
font-size: 1.5em;
color: #666666;
font-variant: small-caps;
text-transform: none;
font-weight: 200;
margin-bottom: 0px;
}
h1
{
font-size: 1.6em;
padding-bottom: 0px;
margin-bottom: 0px;
}
h2
{
font-size: 1.5em;
font-weight: 600;
}
h3
{
font-size: 1.2em;
}
h4
{
font-size: 1.1em;
}
h5, h6
{
font-size: 1em;
}
/* this rule styles <h1> and <h2> tags that are the
first child of the left and right table columns */
.rightColumn > h1, .rightColumn > h2, .leftColumn > h1, .leftColumn > h2
{
margin-top: 0px;
}
/* PRIMARY LAYOUT ELEMENTS
----------------------------------------------------------*/
.page
{
width: 1024px;
height:768px;
background-color: #fff;
margin: 20px auto 0px auto;
border: 1px solid #496077;
}
.header
{
position: relative;
margin: 0px;
padding: 0px;
background: #4b6c9e;
width: 100%;
}
.header h1
{
font-weight: 700;
margin: 0px;
padding: 0px 0px 0px 20px;
color: #f9f9f9;
border: none;
line-height: 2em;
font-size: 2em;
}
.LeftCol
{
float:left;
width:20%;
background:yellow;
}
.RightCol
{
float:right;
background:red;
width:40%;
}
.MiddleCol
{
background:orange;
padding:0px 0px 15px px; /*top, right, bottom, left*/
/*border-bottom: solid #FFFFFF 10px;*/
}
.footer
{
clear:both;
background:green;
}
/* TAB MENU
----------------------------------------------------------*/
div.hideSkiplink
{
background-color:#3a4f63;
width:100%;
}
div.menu
{
padding: 4px 0px 4px 8px;
}
div.menu ul
{
list-style: none;
margin: 0px;
padding: 0px;
width: auto;
}
div.menu ul li a, div.menu ul li a:visited
{
background-color: #0957B7;
border: .5px #4e667d solid;
border-color:White;
color: white;
display: block;
line-height: 1.35em;
padding: 4px 20px;
text-decoration: none;
white-space: nowrap;
}
div.menu ul li a:hover
{
background-color: #bfcbd6;
color: #465c71;
text-decoration: none;
}
div.menu ul li a:active
{
background-color: #465c71;
color: #cfdbe6;
text-decoration: none;
}
/* FORM ELEMENTS
----------------------------------------------------------*/
fieldset
{
margin: 1em 0px;
padding: 1em;
border: 1px solid #ccc;
}
fieldset p
{
margin: 2px 12px 10px 10px;
}
fieldset.login label, fieldset.register label, fieldset.changePassword label
{
display: block;
}
fieldset label.inline
{
display: inline;
}
legend
{
font-size: 1.1em;
font-weight: 600;
padding: 2px 4px 8px 4px;
}
input.textEntry
{
width: 320px;
border: 1px solid #ccc;
}
input.passwordEntry
{
width: 320px;
border: 1px solid #ccc;
}
div.accountInfo
{
width: 42%;
}
/* MISC
----------------------------------------------------------*/
.footerlabel
{
color:White;
text-align: right;
font:arial;
}
.bodylabel
{
color:black;
font:arial;
}
.clear
{
clear: both;
}
.title
{
display: block;
float: left;
text-align: left;
width: auto;
padding-left:12px;
}
.PageTitle
{
font-size: 1.1em;
display: block;
text-align: right;
padding: 20px;
background:white;
}
.loginDisplay a:link
{
color: white;
}
.loginDisplay a:visited
{
color: white;
}
.loginDisplay a:hover
{
color: white;
}
.failureNotification
{
font-size: 1.2em;
color: Red;
}
.bold
{
font-weight: bold;
}
.submitButton
{
text-align: right;
padding-right: 10px;
}
.ListBox
{
width:80%;
height:45%;
}
.MiddleBox
{
width:80%;
padding:0px 25px 0px 225px;
float:inherit;
}
Re: 3 Column CSS Layout - Resizeable Controls?
For .MiddleCol, you should add "margin: 0 40% 0 20%", which will give it a margin of 0 for the top and bottom of the div, a left margin of 20% (equal to the width of your left column) and a right margin of 40% (equal to the right column width). This should prevent the left and right columns from overlapping the middle one.
For .MiddleBox, this is having problems with growing/shrinking due to the padding values (0 25px 0 225px); the width is set as a percentage and that will grow/shrink normally, but the padding is set with exact, unchanging pixels.
The box in the right column also has an explicit pixel width set in a style attribute, so its size will remain consistent.
For all columns, you might consider setting the "min-width" property; this is something you can set in addition to width, which specifies the minimum width that an element should be. So you could set "width:20%;min-width:200px" and the width of the element would either be 20% or 200px, whichever is greater. This property doesn't work correctly in some older versions of IE (it won't mess anything up, it simply has no effect), but I think IE8 is okay.
Please point out anything else that hasn't been addressed.
As an aside, I'd suggest using either Chrome or Firefox for testing web page layouts (and Javascript). Both browsers have better adherence to standards than IE, and have superior developer tools. Chrome has a built-in tool set, and Firefox has the FireBug extension, the latter of which is my preference. Using either approach, you can inspect web page elements on the fly, making visible things like margin and padding so you can see how they're affecting the layout, as well you can edit their values dynamically and see the immediate effect.
1 Attachment(s)
Re: 3 Column CSS Layout - Resizeable Controls?
Thanks - most of that seems to work nicely. The only problem I'm having is that the middle column listbox still jumps under the left column when the page is made smaller. Pls see CSS and Source below:
CSS
Code:
/* DEFAULTS
----------------------------------------------------------*/
body
{
background: #b6b7bc;
font-size: .80em;
font-family: "Helvetica Neue", "Lucida Grande", "Segoe UI", Arial, Helvetica, Verdana, sans-serif;
margin: 0px;
padding: 0px;
color: #696969;
}
a:link, a:visited
{
color: #034af3;
}
a:hover
{
color: #1d60ff;
text-decoration: none;
}
a:active
{
color: #034af3;
}
p
{
margin-bottom: 10px;
line-height: 1.6em;
}
/* HEADINGS
----------------------------------------------------------*/
h1, h2, h3, h4, h5, h6
{
font-size: 1.5em;
color: #666666;
font-variant: small-caps;
text-transform: none;
font-weight: 200;
margin-bottom: 0px;
}
h1
{
font-size: 1.6em;
padding-bottom: 0px;
margin-bottom: 0px;
}
h2
{
font-size: 1.5em;
font-weight: 600;
}
h3
{
font-size: 1.2em;
}
h4
{
font-size: 1.1em;
}
h5, h6
{
font-size: 1em;
}
/* this rule styles <h1> and <h2> tags that are the
first child of the left and right table columns */
.rightColumn > h1, .rightColumn > h2, .leftColumn > h1, .leftColumn > h2
{
margin-top: 0px;
}
/* PRIMARY LAYOUT ELEMENTS
----------------------------------------------------------*/
.page
{
width: 1024px;
height:768px;
background-color: #fff;
margin: 20px auto 0px auto;
border: 1px solid #496077;
}
.header
{
position: relative;
margin: 0px;
padding: 0px;
background: #4b6c9e;
width: 100%;
}
.header h1
{
font-weight: 700;
margin: 0px;
padding: 0px 0px 0px 20px;
color: #f9f9f9;
border: none;
line-height: 2em;
font-size: 2em;
}
.LeftCol
{
float:left;
width:20%;min-width:200px;
background:yellow;
}
.RightCol
{
float:right;
background:red;
width:40%;min-width:200px;
}
.MiddleCol
{
background:orange;
margin: 0 40% 0 20%;
/*min-width:450px;
/*top, right, bottom, left*/
/*border-bottom: solid #FFFFFF 10px;*/
}
.footer
{
clear:both;
background:green;
}
/* TAB MENU
----------------------------------------------------------*/
div.hideSkiplink
{
background-color:#3a4f63;
width:100%;
}
div.menu
{
padding: 4px 0px 4px 8px;
}
div.menu ul
{
list-style: none;
margin: 0px;
padding: 0px;
width: auto;
}
div.menu ul li a, div.menu ul li a:visited
{
background-color: #0957B7;
border: .5px #4e667d solid;
border-color:White;
color: white;
display: block;
line-height: 1.35em;
padding: 4px 20px;
text-decoration: none;
white-space: nowrap;
}
div.menu ul li a:hover
{
background-color: #bfcbd6;
color: #465c71;
text-decoration: none;
}
div.menu ul li a:active
{
background-color: #465c71;
color: #cfdbe6;
text-decoration: none;
}
/* FORM ELEMENTS
----------------------------------------------------------*/
fieldset
{
margin: 1em 0px;
padding: 1em;
border: 1px solid #ccc;
}
fieldset p
{
margin: 2px 12px 10px 10px;
}
fieldset.login label, fieldset.register label, fieldset.changePassword label
{
display: block;
}
fieldset label.inline
{
display: inline;
}
legend
{
font-size: 1.1em;
font-weight: 600;
padding: 2px 4px 8px 4px;
}
input.textEntry
{
width: 320px;
border: 1px solid #ccc;
}
input.passwordEntry
{
width: 320px;
border: 1px solid #ccc;
}
div.accountInfo
{
width: 42%;
}
/* MISC
----------------------------------------------------------*/
.footerlabel
{
color:White;
text-align: right;
font:arial;
}
.bodylabel
{
color:black;
font:arial;
}
.clear
{
clear: both;
}
.title
{
display: block;
float: left;
text-align: left;
width: auto;
padding-left:12px;
}
.PageTitle
{
font-size: 1.1em;
display: block;
text-align: right;
padding: 20px;
background:white;
}
.loginDisplay a:link
{
color: white;
}
.loginDisplay a:visited
{
color: white;
}
.loginDisplay a:hover
{
color: white;
}
.failureNotification
{
font-size: 1.2em;
color: Red;
}
.bold
{
font-weight: bold;
}
.submitButton
{
text-align: right;
padding-right: 10px;
}
.ListBox
{
width:80%;
height:45%;
}
.MiddleBox
{
width:80%;
padding:0% 5% 0% 5%;
float:inherit;
}
MARKUP
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head><title>
Bed Board
</title><link href="Styles/Site.css" rel="stylesheet" type="text/css" />
</head>
<body>
<form method="post" action="default.aspx" id="ctl01">
<div class="aspNetHidden">
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUKLTkxNzA4NDIzNGRkQgtJ7jLazMZTkBZkXzY0pb7GTBQJexhQ/uGemgHPJ/8=" />
</div>
<script src="/WebResource.axd?d=aeDmh_pkJEcmf3eH-VxpNv60KqT632VLkBpbi9471hiw9Uk4vHkWF6aZkWmmHCan--eLuVJ0gwd9eIEgL_jLeqEJa6d4wohRjy-ogp3ZjVU1&t=634461426062179293" type="text/javascript"></script>
<div class="header">
<div class="title">
<img id="Image1" src="Logo.jpg" style="height:58px;width:200px;" />
</div>
<div class="PageTitle">
<span id="Label1" style="color:#B71234;font-family:Arial;font-weight:bold;">Patient Flow Dashboard</span>
</div>
<div class="clear hideSkiplink" style="background-color: #00549F">
<a href="#NavigationMenu_SkipLink"><img alt="Skip Navigation Links" src="/WebResource.axd?d=_A1aDiYvqlQUPnPqqDihy33IGkchwYtBKTBO6cVAG_TUQVlKYtwsMhCUkIUvE1czfgVQ7x8Q0jWpCRKKD5WNC2D4uYCndzJi88YK4mYAdzg1&t=634461426062179293" width="0" height="0" style="border-width:0px;" /></a><div class="menu" id="NavigationMenu">
<ul class="level1">
<li><a class="level1" href="Default.aspx">Home</a></li><li><a class="level1" href="About.aspx">About</a></li>
</ul>
</div><a id="NavigationMenu_SkipLink"></a>
</div>
</div>
<div class="LeftCol">
<center>
<span id="LeftColContent_Label2" class="bodylabel">Housekeeping</span><br />
<select size="4" name="ctl00$LeftColContent$ListBox2" id="LeftColContent_ListBox2" class="ListBox">
</select>
<br />
<span id="LeftColContent_Label5" class="bodylabel">Pending Discharge</span><br />
<select size="4" name="ctl00$LeftColContent$ListBox4" id="LeftColContent_ListBox4" class="ListBox">
</select>
</center>
</div>
<div class="RightCol">
<center>
<span id="RightColContent_Label4" class="bodylabel">Inpatients in ER</span><br />
<select size="4" name="ctl00$RightColContent$ListBox3" id="RightColContent_ListBox3" class="ListBox" style="height:417px;">
</select>
</center>
</div>
<div class="MiddleCol">
<center>
<span id="MiddleColContent_Label3" class="bodylabel">Current Patients</span><br />
<select size="4" name="ctl00$MiddleColContent$ListBox1" id="MiddleColContent_ListBox1" class="MiddleBox">
</select>
</center>
</div>
<div class="footer">
<span id="FooterContent_Label1" class="footerlabel"></span>
</div>
<script type='text/javascript'>new Sys.WebForms.Menu({ element: 'NavigationMenu', disappearAfter: 500, orientation: 'horizontal', tabIndex: 0, disabled: false });</script></form>
</body>
</html>
Re: 3 Column CSS Layout - Resizeable Controls?
Hm, that's actually an interesting problem that I seem to have unwittingly introduced. So you have the margin on MiddleCol, but that's in percentages: 0 40% 0 20%. And the width of LeftCol is a percentage, but the introduction of min-width gives it a fixed width at a certain point. At which point, the left margin on MiddleCol is no longer sufficient: LeftCol starts to overlap MiddleCol and the listbox drops below the float (this is expected behavior given the context).
It would be handy if CSS had a "min-margin" property, but no such thing exists. I guess the most practical approach would be either to remove the min-widths on the side columns, or to give both side columns a fixed width only, and set MiddleCol's margins to fixed sizes as well.
Or maybe someone else will post a better solution :)
