|
CSS - 2 Column Layout Not Expanding
I created a simple 2 column layout, by using floats. The problem I am running into with this layout, is when the right column's height expands; the left column's height does not expand. What do I need to do, to my code; too make both columns expand the to the same height; regardless of how much content is in each side?
CSS Code: Original - CSS Code /* Document Settings - Begin */ body { text-align:center; /* for IE */ margin:0; background:silver url('bg_test2.5.jpg'); } /* Document Settings - End */ /* Layout Structure - Begin */ #wrapper { text-align:left; width:900px; margin:0 auto; border:solid 1px black; height:auto; overflow:auto; background:white; } #header { background: #000 url('ch_banner.JPG') no-repeat 50% 0%; height:146px; } #left_side { float:left; width:200px; background:#B22222; height:100%; border-right:solid 1px black; font-family:arial; } #rite_side { float:right; width:695px; background:white; height:100%; font-family:arial; color:#B22222; } #designer { text-align:left; width:900px; margin:0 auto; background:black; color:white; font-family:arial; font-size:14px; text-align:center; padding-top:3px; padding-bottom:3px; } /* Layout Structure - End */ /* Document Settings - Begin */ HTML Code: Original - HTML Code <div id="wrapper"> <div id="header"></div> <div id="left_side"> <div id="nav"> <ul> <li><a href="#1">Our Tradition</a></li> <li><a href="#2">Menu</a></li> <li><a href="#3">Wines</a></li> <li><a href="#4">Events</a></li> <li><a href="#5">Specials</a></li> <li><a href="#6">Days & Hours</a></li> <li><a href="#7">Contact Information</a></li> </ul> </div> </div> <div id="rite_side"> Line of Text Here<br/> Line of Text Here<br/> Line of Text Here<br/> Line of Text Here<br/> Line of Text Here<br/> Line of Text Here<br/> Line of Text Here<br/> Line of Text Here<br/> Line of Text Here<br/> Line of Text Here<br/> Line of Text Here<br/> Line of Text Here<br/> Line of Text Here<br/> Line of Text Here<br/> Line of Text Here<br/> Line of Text Here<br/> Line of Text Here<br/> Line of Text Here<br/> Line of Text Here<br/> Line of Text Here<br/> Line of Text Here<br/> Line of Text Here<br/> Line of Text Here<br/> Line of Text Here<br/> Line of Text Here<br/> Line of Text Here<br/> Line of Text Here<br/> Line of Text Here<br/> Line of Text Here<br/> Line of Text Here<br/> Line of Text Here<br/> Line of Text Here<br/> Line of Text Here<br/> Line of Text Here<br/> Line of Text Here<br/> Line of Text Here<br/> Line of Text Here<br/> Line of Text Here<br/> Line of Text Here<br/> Line of Text Here<br/> Line of Text Here<br/> Line of Text Here<br/> Line of Text Here<br/> Line of Text Here<br/> Line of Text Here<br/> Line of Text Here<br/> Line of Text Here<br/> Line of Text Here<br/> Line of Text Here<br/> Line of Text Here<br/> Line of Text Here<br/> Line of Text Here<br/> Line of Text Here<br/> Line of Text Here<br/> Line of Text Here<br/> Line of Text Here<br/> Line of Text Here<br/> Line of Text Here<br/> Line of Text Here<br/> Line of Text Here<br/> Line of Text Here<br/> Line of Text Here<br/> Line of Text Here<br/> Line of Text Here<br/> Line of Text Here<br/> Line of Text Here<br/> Line of Text Here<br/> Line of Text Here<br/> Line of Text Here<br/> Line of Text Here<br/> Line of Text Here<br/> Line of Text Here<br/> Line of Text Here<br/> Line of Text Here<br/> Line of Text Here<br/> Line of Text Here<br/> Line of Text Here<br/> Line of Text Here<br/> Line of Text Here<br/> Line of Text Here<br/> Line of Text Here<br/> Line of Text Here<br/> Line of Text Here<br/> Line of Text Here<br/> Line of Text Here<br/> Line of Text Here<br/> Line of Text Here<br/> Line of Text Here<br/> Line of Text Here<br/> Line of Text Here<br/> Line of Text Here<br/> Line of Text Here<br/> Line of Text Here<br/> Line of Text Here<br/> Line of Text Here<br/> Line of Text Here<br/> Line of Text Here<br/> Line of Text Here<br/> Line of Text Here<br/> Line of Text Here<br/> Line of Text Here<br/> Line of Text Here<br/> Line of Text Here<br/> Line of Text Here<br/> Line of Text Here<br/> Line of Text Here<br/> Line of Text Here<br/> Line of Text Here<br/> Line of Text Here<br/> Line of Text Here<br/> Line of Text Here<br/> Line of Text Here<br/> Line of Text Here<br/> Line of Text Here<br/> Line of Text Here<br/> Line of Text Here<br/> Line of Text Here<br/> Line of Text Here<br/> Line of Text Here<br/> Line of Text Here<br/> Line of Text Here<br/> Line of Text Here<br/> Line of Text Here<br/> Line of Text Here<br/> Line of Text Here<br/> Line of Text Here<br/> Line of Text Here<br/> Line of Text Here<br/> Line of Text Here<br/> Line of Text Here<br/> Line of Text Here<br/> Line of Text Here<br/> Line of Text Here<br/> Line of Text Here<br/> Line of Text Here<br/> Line of Text Here<br/> Line of Text Here<br/> Line of Text Here<br/> Line of Text Here<br/> Line of Text Here<br/> Line of Text Here<br/> Line of Text Here<br/> Line of Text Here<br/> Line of Text Here<br/> Line of Text Here<br/> </div> </div> <div id="designer"> </div> <div id="wrapper"> <div id="header"></div> <div id="left_side"> <div id="nav"> <ul> <li><a href="#1">Our Tradition</a></li> <li><a href="#2">Menu</a></li> <li><a href="#3">Wines</a></li> <li><a href="#4">Events</a></li> <li><a href="#5">Specials</a></li> <li><a href="#6">Days & Hours</a></li> <li><a href="#7">Contact Information</a></li> </ul> </div> </div> <div id="rite_side"> Line of Text Here<br/> Line of Text Here<br/> Line of Text Here<br/> Line of Text Here<br/> Line of Text Here<br/> Line of Text Here<br/> Line of Text Here<br/> Line of Text Here<br/> Line of Text Here<br/> Line of Text Here<br/> Line of Text Here<br/> Line of Text Here<br/> Line of Text Here<br/> Line of Text Here<br/> Line of Text Here<br/> Line of Text Here<br/> Line of Text Here<br/> Line of Text Here<br/> Line of Text Here<br/> Line of Text Here<br/> Line of Text Here<br/> Line of Text Here<br/> Line of Text Here<br/> Line of Text Here<br/> Line of Text Here<br/> Line of Text Here<br/> Line of Text Here<br/> Line of Text Here<br/> Line of Text Here<br/> Line of Text Here<br/> Line of Text Here<br/> Line of Text Here<br/> Line of Text Here<br/> Line of Text Here<br/> Line of Text Here<br/> Line of Text Here<br/> Line of Text Here<br/> Line of Text Here<br/> Line of Text Here<br/> Line of Text Here<br/> Line of Text Here<br/> Line of Text Here<br/> Line of Text Here<br/> Line of Text Here<br/> Line of Text Here<br/> Line of Text Here<br/> Line of Text Here<br/> Line of Text Here<br/> Line of Text Here<br/> Line of Text Here<br/> Line of Text Here<br/> Line of Text Here<br/> Line of Text Here<br/> Line of Text Here<br/> Line of Text Here<br/> Line of Text Here<br/> Line of Text Here<br/> Line of Text Here<br/> Line of Text Here<br/> Line of Text Here<br/> Line of Text Here<br/> Line of Text Here<br/> Line of Text Here<br/> Line of Text Here<br/> Line of Text Here<br/> Line of Text Here<br/> Line of Text Here<br/> Line of Text Here<br/> Line of Text Here<br/> Line of Text Here<br/> Line of Text Here<br/> Line of Text Here<br/> Line of Text Here<br/> Line of Text Here<br/> Line of Text Here<br/> Line of Text Here<br/> Line of Text Here<br/> Line of Text Here<br/> Line of Text Here<br/> Line of Text Here<br/> Line of Text Here<br/> Line of Text Here<br/> Line of Text Here<br/> Line of Text Here<br/> Line of Text Here<br/> Line of Text Here<br/> Line of Text Here<br/> Line of Text Here<br/> Line of Text Here<br/> Line of Text Here<br/> Line of Text Here<br/> Line of Text Here<br/> Line of Text Here<br/> Line of Text Here<br/> Line of Text Here<br/> Line of Text Here<br/> Line of Text Here<br/> Line of Text Here<br/> Line of Text Here<br/> Line of Text Here<br/> Line of Text Here<br/> Line of Text Here<br/> Line of Text Here<br/> Line of Text Here<br/> Line of Text Here<br/> Line of Text Here<br/> Line of Text Here<br/> Line of Text Here<br/> Line of Text Here<br/> Line of Text Here<br/> Line of Text Here<br/> Line of Text Here<br/> Line of Text Here<br/> Line of Text Here<br/> Line of Text Here<br/> Line of Text Here<br/> Line of Text Here<br/> Line of Text Here<br/> Line of Text Here<br/> Line of Text Here<br/> Line of Text Here<br/> Line of Text Here<br/> Line of Text Here<br/> Line of Text Here<br/> Line of Text Here<br/> Line of Text Here<br/> Line of Text Here<br/> Line of Text Here<br/> Line of Text Here<br/> Line of Text Here<br/> Line of Text Here<br/> Line of Text Here<br/> Line of Text Here<br/> Line of Text Here<br/> Line of Text Here<br/> Line of Text Here<br/> Line of Text Here<br/> Line of Text Here<br/> Line of Text Here<br/> Line of Text Here<br/> Line of Text Here<br/> Line of Text Here<br/> Line of Text Here<br/> Line of Text Here<br/> Line of Text Here<br/> </div> </div> <div id="designer"> </div> Similar TutorialsHey guys, I've got a two column layout, and I want both columns to be the same height inside the wrapper. Ussually when I do this sort of thing I have a repeating background image or something so it makes it appear they are both the same height, except this template is using rounded corners, so a repeating background won't work. Code: #wrapper{
width:962px;
margin: 25px auto;
}
#mainContent{
width:735px;
background-color: #F4FEFE;
padding:0px;
border:0px;
float:left;
}
#rightColumn{
background-color: #F4FEFE;
width:207px;
height:100%;
min-height:100%;
float:left;
margin-left:20px;
}
Click here to see what I'm talking about... I want that right column to match the height of the main content div. Would this only be possible using JavaScript or is there a CSS solution? Hey, So I have a three column layout being implemented as such: html: Code:
<div class="content">
<div class="col1 column"></div>
<div class="col3 column"></div>
<div class="col2 column">
<div class="header">Header</div>
</div>
</div>
CSS: Code:
.column {
padding: 10px;
position:relative;
}
.header {
background:#cfe6f5;
color:#416383;
font-size:11px;
font-family:Arial;
font-weight:300;
padding-left:15px;
}
.col1 {
float: left;
width:250px;
}
.col2 {
margin-left: auto;
margin-right: auto;
}
.col3 {
float:right;
width:250px;
}
The problem is that the width of the header div extends all the way to the left and right of the page when it's in the middle column, but behaves the way I want it to (extends to the left and right of the column) when it's in the left or right column. Any ideas? Thanks. --Surgery Question title: A 2 column layout, let only the second column scroll horizontally and let them both scroll vertically Hello I did try several idea's, but all failed. Then I did search the web but found a list of > 400.000 in google. If someone is willing to tell me if it is possible and give me some directions, please do. Everything is welcome. I got a list with 3 columns ( basically you could say I have only two columns because 2-3 could be concatenated to together, but they have a different style and justification, but I could live to start with a two column sample) f.e line 1 : value_one - ( some_text - value_two (right justified) ) line 2 : value_one - ( some_text - value_two (right justified) ) line 99:.... e.t.c Column one has a fixed width of 32px. 'some text' can be longer then the wide available and value_two is with 3 spaces appended to column 2. I want that column one is fixed horizontal and that the second and the third column can scroll horizontally. Of course when there are more line's then the height of the container is should be posable to scroll vertically. Finally I need the color behind column one be different then the column 2 and 3. So what I did create is a container with two containers where the left one has a different colour then the right one and above those a container with the list. I have overflow on auto, so I get scroll-bars when necessarily. But my problem is that when I scroll horizontally that my first column scrolls away to the left. Basically my question is. How can I get a 2 column layout, let only the second column scroll horizontally ( first is locked in horizontal place ) and let them scroll both vertically? Hi all, I have a site where I have several divs that stack on top of each other for layout purposes and they fill the entire width of the screen. In the div that contains the content, I'm finding a rare case where a table appears that's so wide, it is off the edge of the content element. I wanted to do overflow:auto so that it wouldn't mess up the layout but the customer wants the layout to expand with the content. Since all these divs sit on top of each, they aren't really interacting with the div that has the content in it. Is the only way to make those expand to use JavaScript to detect the width and adjust on the fly or is there a better way to do it? I'll be happy to supply some code if you all need me to but its a lot so I'll hold off on that for now. Hey there everyone. (First time posting!) I was wondering if i could ask your assistance.. I am very close with my new css layout for a project I am working on but i have one small thing that is bugging me... Click here to view the page: URL now.. the problem is, when the content in the main "white" window expands the green div behind does not... also the footer gets covered up... This will cause me problems, ideally i would like it to push the green and the footer down as the content expands via either the browser window shrinking or just having more content in the white center div.... Check out this to see what is happening when there is more content in the white center to see what i mean: URL Link to my css: URL Thank you so much in advance for your suggestions tips and feedback... Right now I'm trying to work a layout so that it'll stay a preset width unless there's overflowing unbroken content, and then I want it to stretch horizontally (as opposed to just running off the content edge with overflow:visible or scrolling inside the div with overflow:scroll). Min-width gets me to the width of the viewport (but that doesn't help me with the preset width - because there's enough text to go wider than the min-width, it'll go wider - I only want it to stretch if there's unbroken content), but then the divs stop at the edge of the viewport. Basically I'm trying to replicate table behavior. Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> test</title>
<link href="http://kushiel.sasktelwebsite.net/mockuphelp/scripts/primary_stylesheet.css" rel="stylesheet" type="text/css" />
<link href="http://kushiel.sasktelwebsite.net/mockuphelp/scripts/left_nav.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="innerContainer">
<div id="header">
<div id="headerImage"></div>
<div id="headerLogoLink">
<a href=""><img src="http://kushiel.sasktelwebsite.net/mockuphelp/images/spacer.gif" width="182" height="94" border="0" alt="" /></a>
</div>
<div id="headerRandom">
<img src='http://kushiel.sasktelwebsite.net/mockuphelp/images/rotate2.jpg' alt="" width="300" height="125" border="0" /> </div>
<div id="headerNav">
<div>
</div>
</div>
<div id="contentWrapper">
<div id="nav">
</div>
<div id="innerWrapper">
<div id="innerContent">
<table cellspacing="1" cellpadding="1" border="1" align="left">
<tbody>
<tr>
<td style="text-align: right;">2002</td>
<td style="text-align: right;"> </td>
<td style="text-align: right;">666.00</td>
<td style="text-align: right;"> </td>
<td style="text-align: right;">7,399.50</td>
<td style="text-align: right;"> </td>
<td style="text-align: right;">7,507.20</td>
<td style="text-align: right;"> </td>
<td style="text-align: right;">6,491.90</td>
<td style="text-align: right;"> </td>
<td style="text-align: right;">2,100.00</td>
<td style="text-align: right;"> </td>
<td style="text-align: right;">3,578.00</td>
<td style="text-align: right;"> </td>
<td style="text-align: right;">315.9</td>
<td style="text-align: right;"> </td>
<td style="text-align: right;">28,058.80</td>
<td style="text-align: right;">2002</td>
<td style="text-align: right;"> </td>
<td style="text-align: right;">666.00</td>
<td style="text-align: right;"> </td>
<td style="text-align: right;">7,399.50</td>
<td style="text-align: right;"> </td>
<td style="text-align: right;">7,507.20</td>
<td style="text-align: right;"> </td>
<td style="text-align: right;">6,491.90</td>
<td style="text-align: right;"> </td>
<td style="text-align: right;">2,100.00</td>
<td style="text-align: right;"> </td>
<td style="text-align: right;">3,578.00</td>
<td style="text-align: right;"> </td>
<td style="text-align: right;">315.9</td>
<td style="text-align: right;"> </td>
<td style="text-align: right;">28,058.80</td>
<td style="text-align: right;"> </td>
<td style="text-align: right;">666.00</td>
<td style="text-align: right;"> </td>
<td style="text-align: right;">7,399.50</td>
<td style="text-align: right;"> </td>
<td style="text-align: right;">7,507.20</td>
<td style="text-align: right;"> </td>
<td style="text-align: right;">6,491.90</td>
<td style="text-align: right;"> </td>
<td style="text-align: right;">2,100.00</td>
<td style="text-align: right;"> </td>
<td style="text-align: right;">3,578.00</td>
<td style="text-align: right;"> </td>
<td style="text-align: right;">315.9</td>
<td style="text-align: right;"> </td>
<td style="text-align: right;">28,058.80</td>
</tr>
</tbody>
</table>
</div>
<div style="clear:both;"></div>
</div>
<div style="clear:both;"></div>
</div>
<div style="clear:both;"></div>
<div id="footer">
<div id="footerContent">
</div>
</div>
</div>
</body>
</html>
Thanks! Hello, I am having difficulty with the center column on the following page: http://cbo4edu.org/index2.html I want to widen the center column so that the CBO NEWS heading touches the blue line which divides the center and right column. When I try to add width to the style sheet the left column moves out of alignment. Any help is much appreciated, thanks! I am working on the new home page which is based on a template. The left sideColumn is working fine, however I am having a few problems with the mainColumn layout. Here is a static image to show what I want it to look like Here are the problems I am having: 1) The #scroll box is place where I want it in IE but in foxfire it is right up against the left side of the #sideColumn partially hidden. There will be text that scrolls into this box and stops. I haven't started on the part yet - in case that makes a difference. Not my choice, but that is what the bosses want. 2) I want the image centered horizontal within the #mainColumn. Here is what I have for the css: #home img { margin: 5px auto 5px auto; } which I thought would do the trick, but it's not. 3) I want the p text to have a 40px margin on the right and left side like the .large does. Here is what I have for the css: #home p, .large { margin: auto 40px auto 40px; } It works for the .large (Welcome to Vitalograph), but not for the text below it. At one point I had it working, but after addtional changes fixing other problems, now it doesn't and I can't figure out why. Here is the xhtml starting at the 2 column part (wrapper): Code: <!--begin wrapper-->
<div id="wrapper">
<!--begin side column -->
<div id="sideColumn">
<span class="category">Products</span>
<ul>
<li><a href="/products/spirometers.html">Spirometers</a></li>
<li><a href="/products/clinical_trials.html">Clinical Trials</a></li>
<li><a href="/products/asthma_copd.html">Asthma & COPD</a></li>
<li><a href="/products/smoking_cessation.html">Smoking Cessation</a></li>
<li><a href="/products/resuscitaion.html">Resuscitation</a></li>
</ul>
<span class="category">Resources</span>
<ul>
<li><a href="/resources/contact_us.html">Customer Support</a></li>
<li><a href="/resources/training_services.html">Training & Services</a></li>
<li><a href="/resources/exhibitions.html">Exhibitions</a></li>
<li><a href="/resources/newsletters.html">Newsletters</a></li>
<li><a href="/resources/downloads.html">Downloads</a></li>
<li><a href="/resources/useful_links.html">Useful Links</a></li>
<li><a href="/resources/industry_information.html">Industry Information</a></li>
<li><a href="/resources/industry_information.html">Sitemap</a></li>
</ul>
</div>
<!--end of side column -->
<!--begin main column -->
<div id="mainColumn">
<!-- InstanceBeginEditable name="Main_Section" -->
<div id="home">
<div id="scroll"><span>scrolling news will go hear and stop</span></div>
<img src="/images/boys_bubbles.gif" width="485" height="333" alt="boys and bubbles" />
<span class="large">Welcome to Vitalograph</span>
<p>Vitalgraph offers a wide range of spirometers along with other asthma
management equipment with over 40 years experience. From simple hand-held
units to sophisticated Windows based spirometry systems, we have it
all. Check out our full line of respiratory equipment under the product
category.</p>
<p><a href="/about_us/about_us.html">more about us...</a></p>
</div>
<!-- InstanceEndEditable -->
</div>
<!--end of main column -->
</div>
<!--end of wrapper-->
Here is the vitalograph_master.css: Code: body {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 12px;
text-align: center;
background-color: #ffffff;
color: #515151;
margin:0px;
padding:10px;
}
/*page container settings*/
#page {
width: 750px;
height: 600px;
border: 1px solid #5094F9;
background-color: #FFFFFF;
overflow: hidden;
margin: auto;
padding: 10px 10px 10px 10px;
text-align: left;
}
/*logo header and tag settings*/
#header {
margin: 0;
padding-bottom: 5px;
width: 450px;
height: 36px;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
color: #5094F9;
text-align: left;
}
#header img {
vertical-align: -7px;
}
.tagline {
color: #5094F9;
font-size: 16;
font-style: italic;
font-weight: bold;
display: inline;
clear: both;
line-height: 20px;
margin-left: 10px;
}
/*top bar settings*/
#topbar {
float: top;
height: 20px;
background-color: #5094f9;
clear: both;
padding-left: 10px;
text-align: left;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
color: #FFFFFF;
font-size: 12px;
font-weight: bold;
}
#topbar a:link, #topbar a:visited {
background-color: inherit;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
text-decoration: none;
color: #FFFFFF;
font-size: 12px;
font-weight: bold;
}
#topbar a:hover, #topbar a:active {
background-color: #FFFFFF;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
text-decoration: none;
color: #5094F9;
font-size: 12px;
font-weight: bold;
}
#topbar ul {
list-style: none;
margin: 0;
padding-top: 2px;
}
#topbar li {
display: inline;
margin-right: 160px;
}
/*Main Section two columns under top section*/
#wrapper{
padding: 10px 10px 10px 0px;
width: 100%;
height: 100%;
}
#sideColumn {
float:left;
width:155px;
height: 78%;
background-color: #5094F9;
padding-top: 50px;
padding-left:10px;
padding-bottom:10px;
pading-right: 10px;
margin-right: 10px;
text-align: left;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
color: #FFFFFF;
font-weight: bold;
line-height: 20px;
}
.category {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
color: #FFFFFF;
font-size: 16px;
font-weight: bold;
letter-spacing: 5px;
}
#sideColumn a:link, #sideColumn a:visited {
background-color: inherit;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
text-decoration: none;
color: #FFFFFF;
font-size: 12px;
font-weight: bold;
}
#sideColumn a:hover, #sideColumn a:active {
background-color: #FFFFFF;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
text-decoration: none;
color: #5094F9;
font-size: 12px;
font-weight: bold;
}
#sideColumn ul {
list-style: none;
padding: 15px 0px 15px 10px;
margin: 0px;
}
#mainColumn {
padding: 0px;
}
/*footer*/
.footer {
font-family: "Times New Roman", Times, serif;
font-size: 9px;
color: #999999;
}
/*text*/
.large {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
color: #5094F9;
font-size: 18px;
font-weight: bold;
margin-bottom: 15px;
}
Here is the home.css: Code: /*home page*/
#home {
margin: auto;
}
#home img {
margin: 5px auto 5px auto;
}
#home p, .large {
margin: auto 40px auto 40px;
}
#home a:link, #home a:visited {
background-color: inherit;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
text-decoration: none;
color: #5094F9;
font-size: 12px;
font-weight: bold;
}
#home a:hover, #home a:active {
background-color: inherit;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
text-decoration: none;
color: #990099;
font-size: 12px;
font-weight: bold;
}
#scroll {
width: 560px;
padding: 5px;
background-color: inherit;
border: 1px solid #5094F9;
margin-bottom: 5px;
}
Any help or suggestions are greatly appreciated. I am a HTML&CSS novice - I am trying to write a page using a three column layout but the column colour doesn't reach the footer. I understand that this is a common problem and I've looked at a lot of examples on the web of how to work around this or create a better layout but I'm still not sure enough to know which would be the easiest and best to go within the page I have written. I want to avoid images but other than that any help would be great! I have validated the HTML & CSS and they are copied below (could any advice be really specific, as I said this is very new to me!). Thanks HTML: <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Drivers Jonas Information Unit</title> <meta name="keywords" content="1" /> <link rel="stylesheet" type="text/css" href="djiucss.css" media="screen" /> <link rel="stylesheet" type="text/css" href="djiuprintcss.css" media="print" /> </head> <body> <div id="top"> <div id="picture"> <img src="GIF.gif" alt="DJ" width="200" height="100" /> </div> <div id="heading"> <div id="title"><h1>Drivers Jonas Information Unit</h1></div> </div> </div> <div id="left"> <br/><p><a href="about.html">About us</a></p><br/> <p><a href="company.html">Company Information</a></p><br/> <p><a href="legal.html">Legal information</a></p><br/> <p><a href="landreg.html">Land Registry</a></p><br/> <p><a href="research.html">Research</a></p><br/> </div> <div id="right"> <div id="title"><h2> News </h2></div> <ul> <li>The Information Unit has recently acquired a set of new APC guides</li> <li>If you would like any training on databases</li> <li>The Information Unit has created an economy timeline </li> </ul> </div> <div id="main"> <div id="title"><h2>Main stuff</h2></div> <p>Suspendisse adipiscing malesuada lectus. Cras vitae dolor. Donec consequat, lectus sed euismod consequat, ipsum mi mollis nunc, eget nonummy neque purus a tortor. Ut vel lorem. Curabitur mollis mauris id diam. Nam posuere. In placerat sapien ut nisl. Donec volutpat augue ut velit. Proin nec mi sit amet metus placerat egestas. Quisque porttitor massa eu lacus. Donec tristique, neque in sollicitudin euismod, enim tellus varius mauris, id vestibulum est massa id massa. Integer et purus. Vivamus condimentum tincidunt ipsum. Duis augue lorem, pretium vel, cursus at, vulputate sed, neque. Quisque justo. Nunc rhoncus. In ornare venenatis velit. </p> <p>Donec facilisis ante sit amet mauris. Nunc fermentum orci eu quam. Donec vestibulum. Vestibulum ultricies nisl eu eros. Curabitur urna. Duis enim erat, lobortis nonummy, mollis non, porttitor nec, nisi. Phasellus pulvinar purus eu pede. In mollis. Duis sit amet dui et arcu rhoncus auctor. Integer est dui, pharetra vel, volutpat ac, luctus in, elit. </p> <p>Suspendisse adipiscing malesuada lectus. Cras vitae dolor. Donec consequat, lectus sed euismod consequat, ipsum mi mollis nunc, eget nonummy neque purus a tortor. Ut vel lorem. Curabitur mollis mauris id diam. Nam posuere. In placerat sapien ut nisl. Donec volutpat augue ut velit. Proin ne</p> </div> <div id="bottom"> Drivers Jonas Information Unit </div> </body> </html> CSS: #top /*DJ logo and page title - includes h1*/ { color: black; font-family: arial, sans-serif; font-size: 20px; background: #d31145; padding-bottom: 15px; } body { color: black; font-family: arial, sans-serif; font-size:14px } img /*DJ logo*/ { padding: 20px; float:left; } #heading { text-align: center; padding:20px; } /*main page title*/ /*should change all reds to DJ red: #d31145*/ #left, #right, #main { color: white; background: black; } #left { float: left; width:140px; border-right:2px solid #d31145; text-align:left; padding-left: 1em; } #right { float:right; width:140px; border-left:2px solid #d31145; text-align:left; padding-right: 1em; } #main { margin-left: 150px; margin-right: 150px; border-left: 1px solid; border-right: 1px solid; padding: 1em; } #bottom { clear:both; margin: 0; color:black; background: #d31145; font-size: 16px; font-family: Arial, sans-serif; text-align: center; } #title { text-align:center; } a:link {color:white} a:visited {color:silver} a:hover {color:#d31145} a:active {color:#d31145} Hi, http://www.dudley.nhs.uk/search.asp has a two column effect. The CSS for it is he http://www.dudley.nhs.uk/css/screen.css I was wondering why if there is a table in the right hand column with a width percentage over 77% there is some horizontal scrolling? This happens in IE. Any help would be greatly appreciated. Thanks. Janusz Jasinski Hello! I'm new to CSS, so any help would be greatly appreciated! I'm working on this page: sugarhooker[dot]com/testing/index2.html *The CSS is included in the head The right column is suppose to start where it says 'Are you hooked...' It should be right underneath the navigation bar. Anyone know what I'm doing wrong? Thanks in advance! I already have a site up and in progress here, but on the utilities page there I want project descriptions on the right and screenshots/links in the left. I want the code in logical order an not use absolute positioning since that will ruin the automatic vertical pagestretch and require fetching exact coordinates. Ultimately there will be self-managed divs. The text needs to be aligned left to the buttons and the left content centered in its 'area' If this doesn't make sense I can try to explain it better or answer questions here. Oh hey, no URLs allowed for me. Ha. Okay... members.allegro.cc/felix-the-ghost/Utilities.html ^site^ I am creating a website for a synagouge and I am having trouble aligning the third column to the right of the other two. What I have now is he http://www.getabb.com/help/index.htm I want the Blue box on the bottom of the text to be displayed to the right of the text in the Pinkish area. If somebody could show me how to do this, I would appreciate it. Right now the site is only displayed correctly in IE but I will fix that later. Thanks in advance I've seen a lot of guides that demonstrate how to make a pure CSS two column layout so that if you have two different background colors, the columns will be the same height no matter which column is taller. However, I'm trying to create a border around the columns and found that these tricks don't work for that. The border only shows up around the content itself. How can I make it so that the border around both columns is as tall as the tallest column? Well i am trying to have my directory script have 3 items per row. Currently using a horizontal list but as you can see from the below link it isn't work right. Wandering what the best way to do it would be? link -> http://www.gamingonlinux.info/category.php?cid=8 Hello, I'm not new to the web, but a newbie in terms of CSS. Could someone check out the following page and css and let me know why the text is not being wrapped in the overall layout. In other words, why is it running over top of the page footer and not contained. http://www.brainfuelmedia.com/postscript/temp.html and the css is http://www.brainfuelmedia.com/postscript/ps_main.css Thanks for all help. This is driving me nuts. Hi, I'm trying to write a reasonably complex (I think) layout using CSS but I can't get it working. here is a mockup of what it should look like: http://andrew.estyles.com.au/site/sitelayout.gif I basically want the main content area to stretch to fit the content being displayed, and have the right column (in blue) to stretch the whole height of the page. The other three areas are a fixed width/height, although the bottom bar's position must change depending on how long the blue bar is (ie the bottom bar should always be inline with the bottom of the blue bar). Here's my attempt so far: http://andrew.estyles.com.au/site/test.html I can't get the bottom (red) bar to line up with the bottom of the blue bar. If I change the height of the content area, the blue bar does not move but the red bar does. This is the main problem. And also, the website does not display correctly in IE If someone could help me out with these issues I'd be grateful, thanks Is it possible to transform the following structu Code: <div 1> <div 2><div 3><div 4> </div 1> to this visual effect: Code: | div 2 (20 px) | div 3 (auto-adjust width) | div 4 (20px) | Now there would probably not be a problem if we knew the all mighty general width of the <div1>, but we don't, and still we want it this scheme to behave like this: Code: <table width="dynamic"> <tr> <td width="20"></td><td>flexible here</td><td width="20"></td> </tr> </table> So is there some way to do it with divs and css? G'day again, Following on from my last post (as yet unanswered, see the Left and Right Image post below), I am still trying to complete the layout of my site using CSS and <div> tags. As can be seen in the pictu http://img241.imageshack.us/img241/...sitecopyfp2.jpg I have three columns underneath the headers. The width's of each column are fixed, but I want the heights to be the same, ie. that of the column with the most information, and the footer bar to be underneath. The current CSS for the column sections: Code:
#LeftCol
{
position: absolute;
top: 360px; left: 75px;
background-color: #a8b0b3;
width: 157px;
height: auto;
}
#CentreCol
{
position: absolute;
top: 360px; left: 232px;
background-color: #ffffff;
width: 536px;
height: auto;
}
#RightCol
{
position: absolute;
top: 360px; left: 768px;
background-color: #a8b0b3;
width: 157px;
height: auto;
}
and the HTML for the columns: Code:
<div id="LeftCol">
blah blah blah
</div>
<div id="CentreCol">
blah blah blah
</div>
<div id="RightCol">
blah blah blah
</div>
I'd appreciate any help. Cheers. Hi all, I would like to create a 3 column layout with the left menu, right menu & the content to have the same height always independently which is the longest like this example below. Also I have attached the HTML & CSS for your reference. How can I do this in CSS please? Thanks in advance ziffa27 Example: http://www.pixy.cz/blogg/clanky/css-3col-layout/ Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
html, body {
margin: 0;
padding: 0;
}
body {
background: silver;
color: #000000;
font-family: 'Arial, Helvetica, sans-serif';
font-size:11px;
font-weight:normal;
line-height:16px;
text-align:left;
}
#container {
background: yellow;
margin: auto;
padding: 0;
width: 1000px;
}
#header {
background: orange;
margin: 0;
padding: 0;
height: 200px;
}
#left_menu {
background: red;
margin: 0;
padding: 0;
width: 200px;
float: left;
}
#right_menu {
background: blue;
margin: 0;
padding: 0;
width: 300px;
float: right;
}
#content {
background: green;
margin: 0;
padding: 0;
margin-left: 200px;
width: 500px;
}
#footer {
background: aqua;
margin: 0;
padding: 0;
clear: both;
height: 30px;
}
-->
</style>
</head>
</head>
<body>
<div id="container">
<div id="header">Header</div>
<div id="left_menu">Left menu</div>
<div id="right_menu">Right menu</div>
<div id="content">Content<br />Lorem ipsum dolor sit amet, est vitae ut. Risus amet illo mollitia magna erat voluptatem, adipiscing arcu eget cras eu nulla, quam eu nec orci, magna quisque nullam adipiscing integer suspendisse, vulputate hac id vivamus at sed mi. Pede magnis fringilla etiam, tempus vel vitae elementum sed nunc omnis. Praesent condimentum aliquam in eros et, pharetra nam imperdiet corrupti posuere, per suspendisse diam turpis parturient turpis, suscipit semper augue nulla, curabitur ac nisl. Iaculis tempor quam id morbi, sodales nullam nulla, ullamcorper tortor illum hendrerit, wisi fringilla ornare fames in, at ornare luctus eu officia platea.</div>
<div id="footer">Footer</div>
</div>
</body>
</html>
|
|||||||