|
CSS - Flexible-width, Content-first Layout With Fixed-width, Equal-height Sidebar
Hi, I have hit the "wall" in my knowledge of CSS while trying to implement a "flex-width-equal-height-sidebar-layout" style of layout as a skin/theme for a message board system and need some help.
My trouble occurs when a direct link to the post is used (instead of following the menu navigation system) where the top menu information/links area (the area between the banner and the post) is chopped off... The relevant portion of the CSS seems to be the .col_wrap {margin-top: 10px; border: 0; overflow: hidden; float: left; width: 100%; position: relative; z-index: 10; clear: both;} portion of my CSS because if I take out the overflow:hidden declaration then the menu portion of the skin/theme/layout shows correctly but the sidebar the shows the part which should be hidden at the bottom and the footer completely vanishes from view! My apologies but this is the best I can do without having the ability to post pics or urls which could better explain what is wrong and frankly speaking I don't know how anyone here can help given my inability to show the problem but hopefully someone knows or has run into this problem before or can offer some resources that may be of assistance.... Similar TutorialsHello, im trying to make Fixed width 3 columns (each column have fixed width) layout 100% height with header and footer. -Well I see alot of examples around the web, but i dont see complete one and im really tired of searching, i made the Fixed width 3 comlumns layout, left and right are absolute position, and center is relative to the header -the problem is that all columns dont fill the whole height of the browser windows, the footer doesnot work good. so the whole thing is missed up, so please show 100% working example of what i need. Thanks in Advanced Samer i ve been playing with my page and been trying to modify the width of the page (divs) according to the browswer's width. The problem is i want the navigation menu on left to be fixed width (say 200px) and the center div and the right column to be variable width. Also, i want to set a minimum width , so that the floating divs dont roll below the navigation menu. here s the link to the page. try reducing ur browser windows size . the content div rolls down under theleft nav menu. http://ccc.1asphost.com/pacemakerpr...r/cicuitlab.htm Also , i get wierd result in netscape navigator. please help I'd like to make a 2-column layout where each column fills the height of the container div, and the container div's height is determined by the longest div within it... this is getting a bit confusing, because I can't have one being determined by the other one with that one being determined by the first, if that makes sense? Any help would be greatly appreciated, thanks I'm looking for a nice cross browser (well, actually I mainly interested in IE8 and ff3) 3 column layout with header and footer where the middle column has a fixed width and the left and right are variable width. I like these: http://matthewjamestaylor.com/blog/perfect-3-column.htm But none have a fixed width center column (could they be modified for a fixed width center col?) Any suggestions? Hello, How can i create a fixed-width menu to the left with content to the right that fills up the rest of the page. ie, no auto-width, it needs to fill up all the way to the right edge. So if you create a horizontal line <hr> in the content it will draw all the way to the right (except for some padding of course) Like this pictu tinyurl.com/ydsr2ov Hi Guys, I have a layout which is currently setup to be liquid. Aka it spreads out depending on how big the browser window is. I'm trying to get it to be a set width. I can't quite get it figured out. Here is the link to the current layout (made to be generic). It's a layout I got from a CCS class. http://65.175.116.253/design/demo.html The css is here http://65.175.116.253/design/css.css The entire package can be downloaded here http://65.175.116.253/design/design.rar Now, to explain how I want it to look, I took my browser and made it just wide enough to show how wide I want the layout to be, and took a screenshot. But I can't get my css to make the whole layout that wide.. I'm scracthing my head here because it's probably really easy. http://65.175.116.253/design/demo.jpg Let's not worry about the exact width, but I want to define in the css the pixel width, so that can be changed whenever. Here is the CSS Code: /*--- Generic Styles ---*/
body
{
background: #e3edc2; color: #333;
font: .8em, Arial, verdana, sans-serif;
margin: 0;
padding:0px;
}
#main {width:840px; margin:18px auto 0 auto; _text-align:left;}
a
{
color: #686397;
}
a img
{
border: 0px none;
}
p
{
margin: 0 0 1em;
}
.smallboldtext
{
font-family: verdana, helvetica, sans-serif;
color: #686397;
font-size: .7em;
font-weight: bold;
}
.mediumtext
{
font-family: verdana, helvetica, sans-serif;
color: #686397;
font-size: .9em;
}
.mediumboldtext
{
font-family: verdana, helvetica, sans-serif;
color: #686397;
font-size: .9em;
font-weight: bold;
}
.largetext
{
font-family: verdana, helvetica, sans-serif;
color: #686397;
font-size: 1.5em;
}
/*--- Header Styles ---*/
#header
{
margin-bottom: 1.75em;
padding-top: 1px;
background: #abd240;
}
#navbar
{
margin: 0;
padding: 0.5em 3em;
background: #686397;
color: #fff;
}
#navbar li
{
display: inline;
margin-right: 0.5em; padding-right: 0.75em;
border-right: 1px solid #99c;
font-weight: bold;
}
#navbar li.last
{
border: 0px none;
}
#navbar a
{
color: #d4ec84;
text-decoration: none;
}
#today
{
text-align: right;
margin-top: -1.66em; padding: 0 2em 0 0;
color: #fff;
line-height: 1;
}
/*--- Content Styles ---*/
#content
{
float: left;
padding: 0 20em 4em 3em;
}
#content h1
{
background: #fff; color: #686397;
font-size: 1.5em;
margin: 0 33% 1.25em -2em; padding: 0.4em 2em;
}
#content h1 b
{
color: #b0d742;
}
#content h2
{
margin: 0.5em 0; padding-bottom: 0.25em;
border-bottom: 1px solid #b0d742;
font-size: 1.5em;
}
/*--- Content Styles ---*/
table.basic
{
border: 0px;
width: 100%;
border-collapse: collapse;
}
table.basicborder
{
border: 2px solid #b0d742;
width: 505px;
border-collapse: collapse;
}
table.mainsearch
{
border: 2px solid #b0d742;
width: 415px;
border-collapse: collapse;
}
/*--- Sidebar Styles ---*/
#sidebar
{
float: right;
width: 17em;
margin: 0 1em 4em -18em; /* this creates a mathematical layout width of -1 */
}
#sidebar div h3{
background: #9b96ca;
}
#sidebar form_div
{
margin: 0; padding: 0.8em;
}
#sidebar div{
background: #3a3c2d; color: #fff;
padding: 0 1em 1em;
margin-top: 0.75em;
}
#sidebar div h3{
font-size: 1.25em;
margin: 0 -0.8em; padding: 0.4em 0.8em;
text-transform: lowercase;
}
#whatiscompany h4{
margin: 0 0 0.5em; padding: 0.5em 0;
border-bottom: 1px solid #fff;
font-weight: normal;
}
#whatiscompany p:first-line{
font-style: italic;
}
/*--- Footer Styles ---*/
#footer
{
clear: both;
padding: 1.5em 3em;
background: #a0c63a;
height: 15px;
}
#footer p
{
margin: .1em;
}
#footer a
{
color: #333;
text-decoration: underline;
}
I need a combination of this: http://bonrouge.com/3c-hf-fixed.php and this: http://bonrouge.com/3c-hf-fluid.php I need the middle column to be a fixed width and the outer two to be fluid. I also need to maintain the 100% with header and footer at top and bottom respectively. Any ideas how to do this? Thanks. I've noticed a trend in recent CSS sites with a header, content and perhaps double footer. Each of these sections has a fixed width for the content but the backgrounds for each section are liquid and each has a unique colour. I've been trying to replicate this effect on a clients site but I just can't seem to make it work. Does anyone have any ideas? This is the technique I've been using: Code: <div id="header-fluid"> <div id="header-fixed"> <div id="header"></div> <div id="nav"></div> </div><!-- head-fixed --> </div><!-- head-fluid --> Code: <div id="content-fluid"> <div id="content-fixed"> <div id="content"></div> </div><!-- content-fixed --> </div><!-- content-fluid --> Code: <div id="footer1-fluid"> <div id="footer1-fixed"> <div id="sponsors"></div> </div><!-- footer1-fixed --> </div><!-- footer1-fluid --> Code: <div id="footer2-fluid"> <div id="footer2-fixed"> <div id="copyright"></div> </div><!-- footer2-fixed --> </div><!-- footer2-fluid --> Thanks for your time on this!! Hanek I have seen a design which I find pretty interesting where in the main site is aligned left and fixed width at say 700px wide. Yet the footer seems to span the entire screen. The header also seems to use the entire screen width but that is beign accomplished with the background image, but this footer goes all the way to end of the screen and naturally adjusts itself under all the content. Is there a way to get this effect? I'm at the very very very begaining of a table-less design (my first, actually). The problem is, since I have decided to have a non-fixed width, when the browser is minimized, at a certain point the design breaks. See it here (please don't make fun! it's just the start): SiliconSatan.com/test.php I'd like to set a minimum width, probably on the container <div>, so at a certain point it sort of becomes like a fixed width? No smaller than a set width? [EDIT] Also, I have a question about background color mismatch, but it was not quite OT for the CSS forum: http://forums.devshed.com/web-desig...e7t-403266.html Hi, I have a multi-column layout where I want every column to always be the same height. Any one of the columns may be the longest on any given page, so the other columns have to automatically adjust to match that height. Usually I'd just use the faux column technique where you repeat a background image, but that won't work because of two elements on this page: 1. each column has a border all the way around it. 2. one column resizes with the page. I've read the articles on liquid layouts with faux columns, but as far as I can tell those techniques won't work if your columns have borders. Does anyone know any technique that would work here? Thanks. Okay, so I want to get an image (left) and a div container (right) positioned on the same line. The image is 225x225, and I want 15px of space between the image and div container; the div container should also fill in the rest of the width on that page. HTML = <img id="logo" src="logo.gif" width="225" height="225"><!- insert 15px spacing --><div id="navbox"><!-- 100% width? --></div> and, CSS = ? Thanks! Hi Guys, Consider the following box: PHP Code: <div style=border: 1mm black Solid; width: 148mm; height: 98mm;'> </div> 148mm + 1mm + 1mm = width of 150mm 98mm + 1mm + 1mm = width of 100mm Now why does neither firefox or ie manage to get it? Firefox is about 2mm out and ie is about 3mm out? Any ideas or is it some quirk? Charlie Alrighty, I'm trying to produce a layout similar to that of what is shown in the attached image. Please ignore the image being the rainbox colors, but I had to differentiate sections. I can get the banner/search line to appear properly, but the rest will not. Left menu gets positioned fine, the content does as well (more or less), but the right column is displaced, and shifted down to the very bottom of the window -- far right, though. I can't explain much better than that, so without further ado: CSS: Code: .columns-float{
float : left;
width : 80%;
}
.column-one
{
width : 75%; /* NOTE: This needs to be dynamic! THIS is what I'm
inquiring about. The above problem assumes this attribute
is set to "auto". */
float : right;
}
.column-two
{
width : 25%;
float : left;
}
.column-three{
width : 20%;
float : right;
}
.box-footer{
clear : both;
}
.column-one-content{
margin-left: 1px;
margin-right: 1px;
}
/*Hack below:*/
.box-wrap, .columns-float, .column-one, .column-two, .column-three, h2{
p\osition: relative;
}
(Above was borrowed from here, albeit with modifications.) HTML: Code: ... <div class="columns-float"> <div class="column-one"> <div class="column-one-content"> <h2>column 1</h2> <p>column filler</p> <p>column filler</p> <p>column filler</p> <p>column filler</p> <p>column filler</p> <p>column filler</p> <p>column filler</p> <p>column filler</p> <p>column filler</p> <p>column filler</p> <p>column filler</p> <p>column filler</p> <p><a href="#" title="fake link for testing">test link</a></p> </div> </div> <div class="column-two"> <div class="column-two-content"> <h2>column 2</h2> <p>column filler</p> <p>column filler</p> <p>column filler</p> <p><a href="#" title="fake link for testing">test link</a></p> </div> </div> <div class="box-clear"> </div><!-- # needed to make sure column 3 is cleared || but IE5(PC) and OmniWeb don't like it --> </div><!-- close boxbody --> <div class="column-three"> <div class="column-three-content"> <h2>column 3</h2> <p>column filler</p> <p>column filler</p> <p>column filler</p> <p><a href="#" title="fake link for testing">test link</a></p> </div> </div> <div class="box-clear"> </div><!-- # needed to make sure column 3 is cleared || but IE5(PC) and OmniWeb don't like it --> <div class="box-footer">Footer </div> Do not link me to Position Is Everything. Been there already, and it wasn't helpful; the used terminology was too abstruse for me. Any help would be appreciated, and I thank you very much for your time. This is driving me batty. I'm trying to get my submenu lists to be the same width between IE and Firefox, but they aren't equal for some reason. I'm setting the width to 8em, but it's displaying differently between the two browsers. Here's a link to the page Here is my css: Code:
/*Set all elements to start out with margin:0 and padding:0*/
* {
margin:0;
padding:0;
}
body{
font-family: arial,verdana,sans-serif;
font-size: 100%;
height:100%;
background-color:white;
color:black;
behavior:url("./css/csshover.htc");
}
/* Needed to clearfix to clear out floats*/
* html .clearfix{
height:1%;
}
/* This class is used to clear out floats properly*/
.clearfix{
display:inline;
}
/* same as above */
.clearfix:after{
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}
img{
text-decoration:none;
border:0;
}
/*Tile Bar Container*/
#titleMenu{
position:absolute;
height:13%;
width:100%;
border-bottom:1px solid #003366;
z-index:1002;
}
#titleMenu h3{
position:relative;
float:left;
margin:15px 0 0 15px;
font-size:1.50em;
font-style:italic;
font-family:arial,sans-serif;
letter-spacing:1.5px;
word-spacing:2px;
color:#333366;
}
/* Main Menu of image categories*/
#titleMenu ul{
position:relative;
margin-right:60px;
margin-top:6px;
z-index:1003;
}
#titleMenu li{
position:relative;
list-style-type:none;
float:right;
padding:0 35px 0 0;
margin:0;
z-index:1099;
}
/* Sub menu*/
#titleMenu ul li ul{
position:absolute;
margin:0;
top:70px;
left:-1px;
width:8em;
z-index:1000;
}
#titleMenu ul li ul li{
width:100%;
letter-spacing:1px;
padding:0;
border-left:1px solid #BBBBBB;
border-right:1px solid #BBBBBB;
border-bottom:1px solid #BBBBBB;
background-color:#EEEEEE;
z-index:1001;
}
#titleMenu ul li ul li ul{
position:absolute;
margin:0;
top:-1px;
left:8em;
visibility:hidden;;
}
#titleMenu ul li ul li:hover{
background-color:#FFFFFF;
}
/* Sets the first element of ul li ul li ONLY*/
.titleMenuFirstItem{
border-top:1px solid #BBBBBB;
}
/* Style the links in the sub menu's*/
#titleMenu a{
display:block;
width:100%;
font-size:.55em;
text-decoration:none;
color:#003366;
padding:1px 6px;
}
#titleMenu a:hover{
/*none*/
}
/* Rollover functionality for dropdown menus*/
#titleMenu ul li ul{
display:none;
}
#titleMenu ul li:hover ul{
display:block;
}
/* Rollover functionality for popout menus*/
#titleMenu ul li ul li:hover ul{
visibility:visible;
}
/* iFrame Container holding the iFrame*/
#iFrameContainer{
position:absolute;
padding:1px 0;
top: 15%;
height:78%;
width:100%;
border-top:1px solid #BBBBBB;
border-bottom:1px solid #BBBBBB;
}
/* Container holding the footer */
#footer{
position:absolute;
width:100%;
height:4%;
bottom:0;
border-top:1px solid #003366;
background-color:#EEEEEE;
font-size:.65em;
}
#footer ul{
padding-right:5px;
}
#footer ul li{
list-style-type:none;
padding:5px 20px 5px 0;
float:right;
}
#footer a{
text-decoration:none;
color:#003366;
letter-spacing:1px;
}
#footer a:hover{
border-bottom:1px solid #003366;
}
Hi all, noob here. I am trying something pretty simple but just cant get it to work. For my site, I have a main content area and two right sidebars. I am trying to decrease the width of the the content area and widen the sidebars to fill the extra space created, say 50px. I have come unstuck trying to get it done though. Below is the relevant part of the css: Code: /* CONTENT layout */
#content {
float: left;
width: 100%;
padding-bottom: 2em;
}
.sidebar-double #content, .sidebar-left #content {
margin-left: -221px;
}
.sidebar-double #content, .sidebar-right #content {
margin-right: -271px;
}
.sidebar-right-double #content {
margin-right: -448px;
}
/* Add blanks left and right for the sidebars to fill */
.sidebar-double #squeeze, .sidebar-left #squeeze {
margin-left: 221px;
}
.sidebar-double #squeeze, .sidebar-right #squeeze {
margin-right: 271px;
}
.sidebar-right-double #squeeze {
margin-right: 448px;
}
/* Add whitespace to content area */
#squeeze {
padding: 1em 0 1.5em;
overflow: hidden;
}
.sidebar-double #squeeze, .sidebar-left #squeeze {
padding-left: 2em;
}
.rightbar #squeeze {
padding-right: 2em;
}
/* SIDEBAR layout */
#sidebar-wrapper .sidebar {
float: left;
z-index: 2;
position: relative;
}
#sidebar-left {
width: 221px;
}
#sidebar-right-sec {
width: 200px;
padding: 1.2em 0;
}
#sidebar-right {
width: 248px;
padding: 1.2em 0;
}
.rightbar .top-corners {
right: -8px;
top: -3px;
padding-right: 8px;
position: relative;
min-height: 12px;
}
.rightbar .bottom-corners {
right: 0;
bottom: -4px;
position: relative;
min-height: 7px;
}
I have tried changing the content or 'squeeze' margins as its called and then just widening the sidebars but it just doesnt work. If anyone can help it would be great, thanks! This is my first completely css site and I am having troubles with my main content areas and some other small minor things. My design requires that the sidebar be the same height as my content area. What do I need to do to get them the same heights. The main content area changes on each page so my sidebar needs to do the same. Here is the website. I guess I cannot post url's so I hope I made sense. Also an example of what the site is going to look is here. Once again cannot post urls. Also, I need help with lists. In the example image I have the lists side-by-side. Normally I would use a table for this. Is there a way to do this with css? Any help would greatly be appreciated. Thanks, Shaun Hi, this is my first post. I have a problem with the navigation bar on a site that I'm developing (musicboxtheatre.com). It renders properly in firefox and safari, but, of course, IE is causing problems. It renders as steps. The tabs are dropping vertically so that their tops are aligning with the bottom of the previous tabs line-height. Does anyone know of a solution? Update: I rewrote everything, and it somehow works now. Nevermind. I having a bit of a problem with my div tags. I have set a table inside the divs to a fixed width of 300px and the same with the div tag. But if I was to insert text into the table such as: 11111111111111111111111111111111111111111111111111111111111111111111 this makes the table and div tag expand to fit the text on one line. Making is disappear off the page so people have to scroll to view the text. I have tried the CSS command of "table-layout:fixed;" but this just makes the table end and cut of the end of the text. Is there anyway round this?? I cant get the side menu (colored in red at the moment...will eventually be white like the rest) to overflow: auto with 100% height....i know that you need a fixed with for overflow and the only solution i could find (havent tried it tho) was to use javascript to get the window dimensions but i am trying to avoid using javascript. heres the code: <b>The Page:</b> Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>
TEST PAGE
</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
<link rel="stylesheet" type="text/css" href="stylesheets/default.css">
</head>
<body>
<div id="content">
<div id="logo">
<img src="/Images/owlstreelogo.jpg" height="100px" width="300px" alt="Welcome to Owl's Tree">
</div>
<div id="quicknav" style="height: 25px; background-image: url('/Images/quicknavbackdrop.jpg');">
<div id="quicknavtext" style="position: relative; top: 4px; margin-left: 25px; font-weight: bold; text-align: center;">
<a href="index.html">Home</a>
<a href="">Profiles</a>
<a href="">Chat</a>
<a href="">Forums</a>
<a href="">Messages</a>
<a href="">Extras</a>
<a href="">Tickets</a>
<a href="">Suggestions</a>
</div>
</div>
<div id="sidemenu" style="height: 405px; width: 200px; background-color: #FF0000; overflow: auto;">
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</div>
</div>
</body>
</html>
<b>The CSS</b> Code:
body {
background-image: url('/Images/grassbackdrop.jpg');
}
a:link {
color: #7E5C14;
text-decoration: none;
}
a:visited {
color: #7E5C14;
text-decoration: none;
}
a:active {
color: #000000;
text-decoration: none;
}
a:hover {
color: #00FF00;
text-decoration: underline overline;
}
div#content {
height: 100%;
width: 100%;
background-color: #FFFFFF;
}
I know that most of the css is in the page and not the external css but thats because i was modifying it heavily to see what would work and what wouldnt. The problem is the fixed width on the side menu as it wont be consistent across different screen resolutions. any help would be much appreciated as i dont want to continue work on this page until i can figure this problem out. |
|||||||