|
CSS - Equal Div Heights (cannot Use Js Or Faux Hack)
Ok, heres what is driving me nuts:
Pretty typical 2 column layout, header, footer, etc. Although here's the glitch...I'm using css and js to round the corners on most of my divs, so while the js approach works it successfully destroys my rounded corners, this is also why the fauz column hack won't work either. I have an rss feed in my #sidebar div which being dynamic adjusts the div height to fit the content, great! my main content area (in this case 2 divs in a container) is fairly static content set at 800px. Now I can adjust the height of the rss feed however it also successfully breaks my corners (basically the rounded corners stay some where around 750px but the div does expand to 800px with a squared bottom) Is there anyway to either set the height of my #sidebar or is it possible to have my main content area always expand to the #footer? Geez or anything to solve this problem. Here's my CSS: Code: div#container{width:100%;margin: 0 auto;background-color: #000000; overflow:hidden;text-align: center}
div#header{width:98%;background-color: #000000;padding:0px 0;text-align:center;margin: 0px 0px 0 10px}
#site {width: 100%;margin: 1px 0px 0 10px}
#sidebar {float: left;width: 24%;background-color: #FFFFCC;border-right: 1px solid #000000;text-align:left; overflow:hidden}
#content {float: left;width: 74%;background-color: #FFFFFF}
div#footer{width:98%;background-color: #000000;text-align:center;margin: 0px 0px 0 10px;font-family: Verdana, Arial, Helvetica, sans-serif;color: #FFFFFF;font-weight: bold}
#leftcontent {float: left;width:46%;background:#fff;text-align:left; padding-left:10px; padding-right:10px;font-family: Verdana, Arial, Helvetica, sans-serif;color: #000000;font-size: 12px}
#rightcontent {float: right;width:46%;background:#fff;text-align:left;padding-left:10px; padding-right:10px;font-family: Verdana, Arial, Helvetica, sans-serif;color: #000000;font-size: 12px}
#leftcontent h1, #rightcontent h1 {font-family: Verdana, Arial, Helvetica, sans-serif;color: #FF0000;font-size: 14px;font-weight: bold; margin: 0px 0px 0px 0px;padding: 0px 0px 0px 0px;line-height: 0pt}
/* begin styles for RSS Feed
This is the most basic style to use for a list with no bullets */
.rss_box {width: 200px; background-color: #FFFFCC; padding-top:5px}
.rss_title, rss_title a {margin: 0px 0;padding: 0;}
.rss_items {list-style:none;margin:0;padding:0;}
.rss_item {font-family: Verdana, Arial, Helvetica, sans-serif;font-size: x-small;margin-bottom: 1em;}
.rss_item a:link, .rss_item a:visited, .rss_item a:active {}
.rss_item a:hover {}
.rss_date {font-family: Verdana, Arial, Helvetica, sans-serif;font-size: xx-small;}
/* Styles for gliding layers */
#glideDiv0, #glideDiv1, #glideDiv2, #glideDiv3 {position:absolute; visibility:hidden;left:0; top:0; z-index:200;width:100px; height:24px;background-color:#FFFFCC;}
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
/* End hide from IE-mac */
Here's my HTML (minus content) Code: <div id="container" class="clearfix"> <div id="header" class="clearfix"> </div> <div id="site" class="clearfix"> <div id="sidebar" class="clearfix"> </div> <div id="content" class="clearfix"> <div id="leftcontent" class="clearfix"> </div> <div id="rightcontent" class="clearfix"> </div> <div style="clear:both"></div> </div> </div> <div style="clear:both"></div> <div id="footer" class="clearfix"> </div> </div> Thanks! Dave Similar TutorialsHi! I'm playing around with style sheets, mainly because I have a tabular layout at the moment and everyone keeps telling me how evil tables are, so i tought being as i haunt devshed, i should use the advice and before my site gets too big, change it! Finding it quite difficult to start with, but making good progress! And I have the following so far... PHP Code: h1 {font-size: 1.4em; font-family: Times, "Times New Roman", serif; font-weight: bold; text-align: left;} h2 {font-size: 1.3em; font-family: Times, "Times New Roman", serif; font-weight: bold; text-align: left;} h3 {font-size: 1.2em; font-family: Times, "Times New Roman", serif; font-weight: bold; text-align: left;} h4 {font-size: 1.1em; font-family: Times, "Times New Roman", serif; font-weight: bold; text-align: left;} h5 {font-size: 1em; font-family: Times, "Times New Roman", serif; font-weight: bold; text-align: left;} a:link {color: #ffffff; text-decoration: none;} a:hover {color: #dedbcb; text-decoration: underline;} a:visited { color: #ffffff; text-decoration: none;} body {margin: 0; padding: 0; font-family: sans-serif; font-size: .7em; line-height: 1.4em} div#header {padding: 2%; text-align: center; background-color: #0e2e3b; color: #ffffff; margin-bottom: 2px; border-bottom: solid #ffffff 1px} div#footer {padding: 2%; text-align: center; clear: both; background-color: #0e2e3b; border-top: solid #ffffff 1px} div#maincontent {padding: 2%; text-align: justify; margin-left: 150px; background-color: #0e2e3b; color: #ffffff; margin-bottom: 2px; border-right: solid #ffffff 1px; border-left: solid #ffffff 1px} div#leftcolumn {padding: 2%; float: left; text-align: right; background-color: #0e2e3b; color: #ffffff; width: 150px;} div#rightcolumn {padding: 2%; float: right; text-align: right; background-color: #0e2e3b; color: #ffffff; width: 10px;} My question is, the rightcolumn is really just for layout, its not going to contain anything. What I need is the right column to equal the height of the left column all the time, so the layout looks right. Could someone point me in the correct direction? Charlie when reading an identifier in CSS IE will treat two dots in a class decleration as one: accepted rules (strict mode): Code: win ie 5.01: p..class, p./**/.class win ie 5.5 : p..class win ie 6 : p..class, p./**/.class, p./**/class, p/**/.class win ff 1.5 : p./**/class, p/**/.class (comments ignored) win opera : (as firefox) win ns 7.0 : none! Hi, I've been experiencing a problem that for sure most of you should dealed with, I've found the following article: http://www.alistapart.com/articles/fauxcolumns/ The problem I'm facing is that elements only stretch vertically as far as they need to. Meaning, if a 200-pixel tall image is contained within a <div>, the <div> will only expand down the page 200 pixels. On the referenced article the proposed solution is to use a background image. However I'm looking for something else, let's suppose the following html code: Code: <table> <tr> <td width="200" bgcolor="#FFFF00">navigation</td> <td width="500" bgcolor="#CCCCCC">content</td> </tr> </table> Both cells strecth vertically each other on both directions, is navigation is taller the background in content is stretched, and if the content is taller navigation's background is stretched. Is possible to achieve this behaviour avoiding tables? Regards, Caste I have a site with 2 faux columns, and on Safari every other pixel of display width shows a 1px strip of the background image to the side of the table. Can anyone help me correct this? It's driving me nuts!! It's only particularly noticeable when resizing the browser window. The background image and table are the same size (750); when I tried setting the background to 749 it left a visible jog. If you're using Safari you can view the problem at danielsobel dot com Thank you SO much! I took the faux column idea, and from it created a left and right border image for my site. The following CSS from Dan Cederholm's faux column article on ALA is what I used, which is below.. Code:
/* image width is 760px, with one px on each end leaving 758px for the content area */
body {
background-image: url(images/bgborder.gif);
background-repeat: repeat-y;
background-position: 50% 0;
text-align: center;
margin: 0 0;
padding: 0 0;
}
To test to make sure it worked well, I placed a content div on the site, which is centered and has a background color, to test to make sure the border image worked as it should. This is below... Code:
#allcontent {
width: 758px;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
padding: 0 0;
background-color: #ccc;
}
In FF this works great, but I found a bug in IE (as usual ) that I can't figure out. In IE 6.0, when the window is resized, the background from the content that should be inbetween the border image actually overlaps the image on the left hand side. I can't think of anything that would trigger this, has anyone ever run into it? If not, does anyone have any idea why it happens? -B Ive first tried a 2 column layout using the faux technique. Now im trying it with 3 columns but i dont understand it. I read some articles about it and still dont get it really. Can someone explain the main idea of how its done? Just a simple one like this: navigation div | contents div | right menu div No headers and footers and all 3 columns extend to the bottom of the page (all same height). thanks in advance. Im trying the faux column technique but somehow it wont work. I use: Code: body{
background-image: url('themes/default/faux_bg.gif');
background-position: 20% 0%;
background-repeat: repeat-y;
margin: 0%;
padding: 0%;
}
.. in my css file. However it doesnt do anything. I am sure the css file is loaded because when i remove the <link> line the rest of the elements lose their style. When i place the code directly into the body tag like this: <body style="background-ima... etc. it does do something. What am i doing wrong? Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="themes/default/basic_sheet.css">
</head>
<body>
<?php require('includes/structure.php'); ?>
<div class="contentsDiv">
blabla blab,ala<br><Br>
dsjkdasdas<br>djsadhjksad<br>djsuiohashd
</div>
<div class="panelDiv">
contact 1<br>
contact 2<br>
contact 3<br>
</div>
</body>
</html>
(PS the image is a 10px line with the first 20% filled with blue and the other 80% filled with white. thanks in advance. Hello, I was wondering if there is any good alternative to faux columns to make a 2 column layout, where the 2 columns extend from the top to the bottom of the screen (without a footer). The basic structure looks like this: Code: <div id="main_container"> <div id="navigation_menu"> This div is set to float left with a width of 20% (assuming there's no margin, border and padding) </div> <div id="contents"> This div is set to float left with a width of 80% (assuming there's no margin, border and padding) </div> </div> I want the right side of the navigation div to have a dashed border. Probably this could be achieved by using faux columns, but it's too much of a hassle in my opinion. Whenever I want to change the color or column size of the navigation bar, I have to alter the faux-image. Also when i use this dashed border the faux-image has to be larger than 1 pixel height. It would have to be around 10 pixels (5pixels for the part where the dash is showing and 5 pixels for the part where there's no dash. Is there really no easier way to extend the color of the navigation div all the way down to the page? Thanks in advance ok this is taking to long i go think of something else so I have a side menu & main content inside a main container which has background so it looks like side menu & main content have diff. backgrounds and they all of same height.. Problem: I would like to add something to the BOTTOM of the side menu but am not able to do so.. this text has to appear at the bottom of the page even if content of side menu is less.. I could do "position:absolute" and give it top:870. but this is not dynamic as when the main content is larger it appears this text is in the MIDDLE rather than at the bottom? I feel like I am going backwards instead of forward. I have made many changes to the layout trying to achieve what I want I had something close, but it was for a fixed height for the main page layout box and I needed something that will be a min height of 600px but will stretch if the content exceeds that. So now after reading many tutorials on boxes, blocks, layouts, floats, etc. I am actually further from acheiving my goal (I think). I feel like I am losing my mind trying to figure it out I have made each major box a different color for purposes only of trying to get the layout right and figuring out what each element is actually doing - so ignore all the funky colors. I tried using a background image to create a faux side column (hot pink border) that I hoped would do the trick - however, I can't even get it to show up. I realize there has got to be something I am over looking - but what??? I tried using the css toolbar helper - the bg image is outlined but not showing up?? There are no broken images either ??? Click here to see the page So here is my css: Code:
/*Main Section two columns under top section*/
#wrapper{
width: 100%;
min-height: 100%;
background-color: #660099;
padding-top: 10px;
position: relative;
}
#sideColumn {
float:left;
width:155px;
height: 100%;
background: url(images/blue.gif) repeat-y;
border: 1px solid #FF00FF;
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: transparent;
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;
margin-left: 175px;
background-color: #99FF00;
}
Here is my xhtml: Code: <body>
<!--begin page -->
<div id="page">
<!--begin header -->
<div id="header"><img src="images/vitalograph_spirometers_logo.gif" width="230" height="36" alt="vitalograph spirometers logo" />
<span class="tagline">world leaders in spirometry</span> </div>
<!--end of header -->
<!--begin topbar -->
<div id="topbar">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about_us/about_us.html">About Us</a></li>
<li><a href="other_regions.html">Other Regions</a></li>
</ul>
</div>
<!--end topbar -->
<!--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/customer_support.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>
<img src="/images/boys_bubbles.gif" width="485" height="333" alt="boys and bubbles" />
<span class="large">Welcome to Vitalograph</span>
<p class="home">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 class="home"><a href="/about_us/about_us.html">more about us...</a></p>
</div>
<!-- InstanceEndEditable --> </div>
<!--end of main column -->
</div>
<!--end of wrapper-->
</div>
<!--end of white border -->
</div>
<!--end of page -->
</body>
Hi, I believe this to be a IE bug that causes the middle click (used for scrolling a page) to be disabled on floating objects. I've noticed this before in the past but I don't know what the real cause is. If I remember correctly this problem is fixed in IE 7. The problem is I have 2-3 floating columns centred in the middle of the page (using margin: auto). Now in firefox when you middle click within the floated objects in the middle of the page you are able to use the scrolling function. In IE 6 when you middle click on the object it will not work, you have to middle click outside the boundaries in order to scroll. Does anyone know the cause of this strange behaviour? I did a search but I can't seem to find anything about it. Cheers! Hello everyone I've created a faux background for a website I'm currently working on to create the illusion of a column extending to the bottom of the page. The url is as follows: http://notquiteperfekt.gamedaemons.net/eruptmediav2/erupt.html The CSS code I've used is: body { background-image: url("images/pgbkg.jpg"); background-repeat: repeat-y; background-position: 50% 0%; } ---- When viewing the page in Internet Explorer 5.0+ it lines up fine. However, in order for it to line up successfully, I had to add the following code to nudge my <body> content over: html body {padding-left:11px;} ---- Fine and dandy, the extra code made things line up quite nicely. Then comes FireFox. The <body> content is 1px to the right of the background & causes the page to be a little off-center. View the previous URL in FireFox to better understand what I mean. ---- When I don't use the html body {padding-left:11px;} then the page is approximately 11-12 pixels off center - however my CSS code tells the background to position itself 50% on the X-axis & my HTML code tells the body to center itself as well via align="center" Why do these two not line up then? ---- If anyone can view->source to pick out what's causing this & reply back it would be greatly appreciated. You can reply here or e-mail me at sevunx@gmail.com.NOSPAM - I thought I was past all of the headaches with CSS I'm working on a very simple layout for a site right now, where there are two repeated images on either side of the content in div's, and obviously everything else in between. The problems I'm having a - getting the image div's to extend to the end of the page no matter what the height (currently they only fill the browser when the page is loaded, if the page goes further the images do not repeat) - getting the content div to take up all available space, so the footer div will always be at the bottom of the page, even if it is not vertically scrollable. Here's the code: 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" lang="en">
<head>
<title>The Website</title>
<style type="text/css">
html {
height: 100%;
}
body {
background-image: url(bg.jpg);
height: 100%;
margin: 0;
min-width: 1024px;
text-align:center;
}
#wrapper {
margin: auto;
align: center;
height: 100%;
width: 1024px;
}
#left {
background-image: url(sidebar-left.png);
height: 100%;
width: 32px;
float:left;
}
#center {
background-color: #AAAAAA;
height: 100%;
width: 960px;
float:left;
}
#right {
background-image: url(sidebar-right.png);
height: 100%;
width: 32px;
float: right;
}
#banner {
background-image: url(banner-pattern.jpg);
height: 100px;
}
#buttons {
background-color: #FFFFFF;
height: 20px;
border: 1px solid black;
}
#content {
border: 1px solid black;
height: 100%;
}
#footer {
background-color: #FFFFFF;
height: 80px;
border: 1px solid black;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="left"></div>
<div id="center">
<div id="banner"></div>
<div id="buttons"></div>
<div id="content"></div>
<div id="footer"></div>
</div>
<div id="right"></div>
</div>
</body>
</html>
I don't have it hosted anywhere right now but I think it's a relatively simple problem. I did search around for solutions for a while, but I couldn't find a fix. Yes, I am new to CSS / website design / not using tables to do things Well I've run into a few more snags and after all of my atempts to learn this **** on my own I failed and need help... keep this in mind... My only table named capsule is defined like so: index.php Code: <body> <table class="capsule"> default.php Code:
.capsule
{
border-collapse:seperate;
border-spacing:0;
position:absolute;
left:0;
top:0;
bottom:0;
right:0;
width:100%;
height:100%;
}
My "biggest" concern I'm trying to make a site that is at least supported on all resolutions supported by my monitor, 800x600 to 1600x1200. I also plan to include 640x480 but my monitor doesn't go that low so I'm hoping it looks nice, as if anything could look nice at 640x480, when the other resolutions are tested. I found a few solutions to this but unfortunatly none of them worked for strict xhtml. Most of them used the tagline height attribute and tagline margin attributes. I substituted the tagline html for CSS like this: Code:
body
{
margin:0;
}
This didn't work, you might have guessed that... I know with an object and static sizes, like something defined in px, can use the overflow scroll property. But that's static sizes and limited in resizing features. Here is the code I got my ideas from: [code] <BODY leftmargin="0" rightmargin="0" topmargin="0" bottommargin="0" marginwidth="0" marginheight="0" link="#000000" alink="#CDCDCD" vlink="000000"> <TABLE border="0" cellpadding="0" cellspacing="0" height="100%"> [code] I looked for an alternate to margin-height and margin-width with no luck. Another "issue" spacing in cells. I hate IE, yet another problem that is ONLY visible in IE, not opera no mozilla, firefox, galleon, konquor. Wha thappens is, gayness spacing. I have the following CSS and this worked in every browser but IE 6.0. Unfortunately, since MS is a big part of the computer world, I can't just NOT support it. See .capsule above. According to w3schools this should work from IE5+. One more "thing" ...a little off topic, just a lil' I always thought that Opera used the IE engine but Opera, IMO is better than IE. It just, works. All this for well you know...ugly sites suck... Any responses to any of these topics or to further expand on the are more than welcome!!! PS When I came to this site it said 404 NOT FOUND. I tried again it worked. I then tried NEW THREAD and again the same thing. I tried again and it worked. I said "F* this ****" cleared cache etc and tried again. Still the same problem. Any new place I vist from this visit on, I think, is going to be a pain, all of my old bookmarks will have to be updated somehow...I don't know what this is. Any button I hit, preview post, ad links, save changes, submit thread, etc.. all do the same thing. Some admin might be interested in this... Once I do it once it doesn't happen for that action anymore. See: http://www.mandgweb.net/css_help/ I am trying to get the 'divs' of the 3 columns of content (A, B, C) to expand to the height of the tallest column (in this case 'A') while the height of the main container (blue border) expands/contracts as necessary to accommodate the tallest column. The main effect I am trying to achieve it to get the vertical rules between the columns to be the same height (i.e. the height of the tallest column). Easier said then done..? Thanks in advance. Greetings Not sure about the best way to go about this. I have an Unordered List that has a set height for the List Items. Like so: Code:
#left ul {
padding: 0px;
list-style-type: none;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
}
#left ul li {
text-align: center;
float: left;
margin-right: 20px;
height: 200px;
margin-bottom: 20px;
}
This works fine for most of the pages, but there is one where I really need the height of the <li>'s to be 350px. I tried just adding a class like Code:
.comics {
height: 350px;
}
I tried adding this to the <li> Code:
<li class="comics"><a href="#"><img src="images/comics/thumbnails/HeldvsHeldin3_sm.jpg" alt="" width="250" height="350">
</a></li>
and also just a <span> Code:
<li><span class="comics"><a href="#"><img src="images/comics/thumbnails/HeldvsHeldin3_sm.jpg" alt="" width="250" height="350">
</a></span></li>
but it still kept the 200px height. Do I need to make a whole new <li> code or am I missing something? Hey, I was wondering how you set the height of a div so that the div will cover the full height of the page. currently i have: .navigationDiv{ position: absolute; width: 19%; height: 100%; } This fills the whole visible part of the document as it was loaded but once you start scrolling down its not filled anymore. how to fix this? thanks in advance? Hi, I have a dotted border that seperates my navigation bar from my content area. My question is since I had to remove a set height from my CSS IDs how to I get the border to extend all the way from the top blue bar all the way to my footer? It looks okay on the main page because it uses up all of the space but when you go to a page where the content does not take up the same height as the nav area the border does not extend all the way down. The border is currently set as border-right for the main content. If i set it to border-left for the nav bar it will display correctly on the shorter pages but only cover the nav bar for my longer pages. Any ideas on how to fix this problem? Its the last one! My site is located he http://www.venturingvortex.org the css is located he http://www.venturingvortex.org/Style/Master.css Hello, I have been writing a web page as a project for a course using XHTML. I have tested it with several browsers, including IE, Netscape, and Opera and validated its source code and CSS Style sheet. The site works at 1024 X 768 resolution. My problem is that if I minimize the window or change the screen resolution size every div element gets switched around and the display is destroyed. The page is currently located at http://student.flvs.net/html/millety/mod8/index2.htm . Please tell me how to fix this. The links on the page do not work as they should, so only look at the oage I have linked to. I would like the color behing the navigation to run in a vertical band all the way to the bottom of the page. The footer is supposed to be all the way at the bottom and the main text's background color should not appear under it, which is part of my current problem. Thank you in advance for your help. |
|||||||