|
CSS - Okay, Why Aren't These 2 Divs Taking On Their Height Values?
I had my css working fine and then I decided to change the layout and I almost have the new style sheet finished.
However, I am trying to divide my header field into 2 columns (each 50% of the width), the left most column will have my banner and the right most column will be split in half (each half being 50% of total height), with 2 rows, one for a search field and the other for my main site navigation. However, the 2 rows are not taking up the 50% of the height that I would like for them to take up. Any ideas as to why? I tried defining min and max height, but that didn't work... Here's my css: Code:
/* CSS Document */
h1 {
font-family: Geneva, Arial, sans-serif;
font-size: 20px;
color:#000000;
}
h2{
font-family: Geneva, Arial, sans-serif;
font-size: 16px;
color:#000000;
}
h4{
font-family: Geneva, Arial, sans-serif;
font-size: 12px;
color:#000000;
}
/*============================ Begin Layout Structure ============================*/
#wrapper { /* main container for everything */
width: 1024px;
min-height: 748px;
margin: 0 auto;
background: #ffffff;
overflow: hidden; /* contain inner floats */
position: relative; /* establish the containing block */
}
#accounttypeselector { /* select personal or business to affect page display */
height: 25px;
background: #0000FF;
}
#servicesbar { /* container for user services */
height: 30px; /* 30px should be adequate height */
width: 100%;
}
#servicesbar-services { /* container for user services once logged in */
float: left; /* push this to left side */
width: 75%; /* want it to be 75% of the servicesbar width */
height: 100%; /* since servicesbar container height is 30px should be 100% of this */
background: #ff00ff;
}
#servicesbar-login { /* for user login and logout - contained inside servicesbar */
float: left; /* should push this just beside services */
width: 25%;
height: 100%; /* since servicesbar container height is 30px should be 100% of this */
background: #8B2323;
}
#header { /*header for the site - will contain logo, search, and main navigation */
float: left;
width: 1024px;
height: 100px;
}
#header-logo { /* will include site banner/logo - will be located on left side */
background: #ff0000;
width: 50%;
float: left;
}
#header-rightcol { /* column for search and main nav */
width: 50%;
float: left;
}
#header-rightcol-search {
min-height: 50%;
max-height: 50%;
background: #7FFFD4;
}
#header-rightcol-navmain { /* navbar that will be located below header */
min-height: 50%;
max-height:-50%;
background: #21ee00;
}
#bodywrapper { /* wrapper for main content - will have 3 columns here */
width: 1024px;
height: 100%;
padding-top: 10;
}
#bodywrapper-navleft { /* sub nav to be lcoated in left column of bodywrapper */
width: 15%;
background: #8B8378;
float: left;
}
#bodywrapper-main { /* main content to be located in middle column of bodywrapper */
width: 60%;
background: #66CDAA;
float: left;
}
#bodywrapper-news { /* news column to be located in right column of bodywrapper */
width: 25%;
background: #8A2BE2;
float: left;
}
#footer { /* footer to be located at bottom of wrapper */
margin: 0 auto;
position: relative;
width: 1014px; /* will be 1024 with padding */
height: 20px;
padding-right: 10px;
}
and here's my basic html Code: <!DOCTYPE html> <html> <head> <title></title> <link rel="stylesheet" type="text/css" href="test2.css" /> </head> <body> <div id= "wrapper" > <div id= "accounttypeselector" > Lorem ipsum dolor sit amet </div> <div id= "servicesbar" > <div id= "servicesbar-services" > Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</div> <div id= "servicesbar-login" > Lorem ipsum dolor sit amet</div> </div> <div id= "header" > <div id= "header-logo" > Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras volutpat, purus ac pellentesque adipiscing, mauris ligula convallis metus, vitae scelerisque nibh orci quis mi. *** sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur porttitor aliquam libero. Quisque molestie ornare sem. Nam euismod sem lacinia ipsum. In pharetra metus ut dolor cursus aliquam. Maecenas eu ante quis enim tincidunt laoreet. Pellentesque varius nunc in ipsum pulvinar sollicitudin. Nunc et mi. Donec auctor dignissim orci. Aliquam sed magna. Pellentesque in dui. In eget elit. Praesent eu lorem.</div> <div id= "header-rightcol" > <div id= "header-rightcol-search" > Lorem ipsum dolor sit amet, consectetuer adipiscing elit. </div> <div id= "header-rightcol-navmain" > Lorem ipsum dolor sit amet, consectetuer adipiscing elit. </div> </div> </div> <div id= "bodywrapper" > <div id= "bodywrapper-navleft" > Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras volutpat, purus ac pellentesque adipiscing, mauris ligula convallis metus, vitae scelerisque nibh orci quis mi. *** sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur porttitor aliquam libero. Quisque molestie ornare sem. Nam euismod sem lacinia ipsum. In pharetra metus ut dolor cursus aliquam. Maecenas eu ante quis enim tincidunt laoreet. Pellentesque varius nunc in ipsum pulvinar sollicitudin. Nunc et mi. Donec auctor dignissim orci. Aliquam sed magna. Pellentesque in dui. In eget elit. Praesent eu lorem. </div> <div id= "bodywrapper-main" > Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras volutpat, purus ac pellentesque adipiscing, mauris ligula convallis metus, vitae scelerisque nibh orci quis mi. *** sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur porttitor aliquam libero. Quisque molestie ornare sem. Nam euismod sem lacinia ipsum. In pharetra metus ut dolor cursus aliquam. Maecenas eu ante quis enim tincidunt laoreet. Pellentesque varius nunc in ipsum pulvinar sollicitudin. Nunc et mi. Donec auctor dignissim orci. Aliquam sed magna. Pellentesque in dui. In eget elit. Praesent eu lorem. </div> <div id= "bodywrapper-news" > Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras volutpat, purus ac pellentesque adipiscing, mauris ligula convallis metus, vitae scelerisque nibh orci quis mi. *** sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur porttitor aliquam libero. Quisque molestie ornare sem. Nam euismod sem lacinia ipsum. In pharetra metus ut dolor cursus aliquam. Maecenas eu ante quis enim tincidunt laoreet. Pellentesque varius nunc in ipsum pulvinar sollicitudin. Nunc et mi. Donec auctor dignissim orci. Aliquam sed magna. Pellentesque in dui. In eget elit. Praesent eu lorem. </div> </div> </div> <div id= "footer" > Lorem ipsum dolor sit amet, consectetuer adipiscing elit. </div> </body> </html> Thanks in advance and any suggestions would be greatly appreciated. Similar TutorialsThe problem is that I have a wrapper div that will contain two "boxes", one that has a white background one that has a black background. I want the white background box to be to the left of the black background box, but inside the wrapper div which has a red background. It works just fine in IE (which surprised me) but Firefox is doing something really strange. The black background box starts all the way to the left of the wrapper with the white background box on top of it. Not only that, but the text for the black background box starts below the white background box. I'm new to inserting code, but I'll give it a try: 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>
<title>linking to style sheets 2</title>
<style type="text/css">
body {
background-color: #ccccff;
}
h1 {
font: bold 20px arial, tahoma, verdana;
color: #6633ff;
border-bottom: 1px solid #444444;
margin: 25px 0;
padding: 5px;
}
p {
font: 15px verdana;
line-height: 1.5em;
color: #000077;
margin: 0;
padding: 0;
}
.leftbox {
width: 300px;
background-color: #ffffff;
padding: 10px;
margin: 10px 10px;
float: left;
}
.rightbox {
width: 300px;
padding: 10px;
margin: 10px 10px;
background-color: #000000;
}
.wrapper {
width: 800px;
background-color: #ff0000;
}
.end {
clear: both;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="leftbox">
<h1>Heading 1</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Cras pede sem, lobortis tempus, sodales sed, vehicula vitae,
lorem. Fusce nec massa id erat lobortis semper. Vestibulum
dignissim orci et orci. Fusce quis tortor eu sapien gravida
pretium. Sed vel lacus. Aliquam erat volutpat. Pellentesque
suscipit imperdiet nibh. Vivamus ut turpis. In leo. Quisque
augue. </p>
</div>
<div class="rightbox">
<h1>Heading 1</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Cras pede sem, lobortis tempus, sodales sed, vehicula vitae,
lorem. Fusce nec massa id erat lobortis semper. Vestibulum
dignissim orci et orci. Fusce quis tortor eu sapien gravida
pretium. Sed vel lacus. Aliquam erat volutpat. Pellentesque
suscipit imperdiet nibh. Vivamus ut turpis. In leo. Quisque
augue. </p>
</div>
<div class="end"></div>
</div>
</body>
</html>
You'll see that I've floated the white background div, but again, this is making that div sit on top of the black background div. Can anybody help? P.S. I know this isn't really pleasing to the eye, but it's just for demonstration purposes I have read the other topics on the height and I have worked out a compromise in IE where I can set the height of my Divs in pixels, as I want the columns to align up at the bottom. However I would prefer it if the height was relative to the browser resolution which is what I have in Firefox by using % instead of pixels. Is there a way I could make IE use % at all? Here's the CSS concerned. Code:
#centercontent {
position: absolute;
background:#fff;
width: 78.3%;
height:auto;
min-height: 80%; /* works in FF, not IE */
margin-left: 19%;
font-family: Verdana, helvetica, Arial, Tahoma, sans-serif;
padding: 6px;
}
/* for Internet Explorer */
* html, #centercontent {
height: 600px;
}
hi.. i need to change the height of drop down box, if i change that using style means getting in firefox but not in IE.. IE taking some default height... need to avoid tht.. help me out guys.. its very urgent... pls... Hi everyone. I sure hope someone is nice enough to help me figure this out... these two problems has plagued me for a long time and I simply need to ask for help. I'm new to CSS, so you'll probably see all kinds of problems other than the one I'm writing about (and if you do, please do tell me... I'm open to any suggestions on how to tweak this). My site is http://www.kettlebell.com. But specifically, let me direct you to http://www.kettlebell.com/fitness91...the-rescue.html as it is a good example of the problems. I have several DIV tags separating the content, displaying google adsense, etc. I have a liquid 3 column layout. Some of my frustration may become more apparent as you resize the browser window. Chunks of my page get covered over with white space, which appears to be related to these div tags. So what ends up happening is that, depending on the size of the window, more or less of the content (including pictures) get chopped off... so I may have whole paragraphs missing or I may see only a strip of a photograph. For example, when the browser is fully expanded, since the text spreads over more area, it looks like the white areas get even larger. This problem reduces the smaller the window is, because the text wraps sooner, resulting in less competition for space. To make things even weirder, this problem isn't consistent in FireFox. On my PC here at home, the page looks fine. But at work, in FireFox, I have this problem. (I don't know what version I have at work because I can't check right now, but mine at home is 1.5.0.7) As may be of no surprise to anyone, I have this version in IE regardless of where I am! Also, is there a way to make it so that, when a page gets a certain width (on the smaller side), that it'll stop the columns from moving, so I can have a fixed minimum width for each column and the overall page? Because if I don't, then the layers end up covering each other when I make the page too small. I'd rather that, when I make it too small, the page stops getting smaller and just forces me to scroll to see the whole thing. Any assistance would sure be appreciated. I'm so frustrated with this. Also, if anyone has any suggestions on how I can improve the page or my use of CSS or any other tips, I'd be eager to hear them. Just please keep in mind that I am a newb. Here is my CSS... http://www.kettlebell.com/css.css (by the way, has anyone ever had their monitor start "pinging"? right now, it is intermittingly making a pinging noise and flashes a line across the monitor in different areas. Weird.) Layout Page I know. It's not too great yet. But I've just started and it's still in the baby stages. whenever I add a width or height paramater to "navBar" the background image NEVER shows up, even with content! Why is that? Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Coast Guard</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<style type="text/css">
body {
background: url(Images/bgClouds2.jpg);
height: 100%;
}
html {
height: 100%;
}
.navigationBar {
width: 150px;
height: 1000px;
background-image: url(Images/navBarImage.png);
background-repeat: repeat-y;
border-style: dotted;
overflow: none;
}
#section {
padding-left: 57px;
overflow: none;
font-size: 15px;
text-align: left;
}
#top {
width: 901px;
height: 1000px;
margin-left: auto;
margin-right: auto;
margin-top: 20px;
margin-bottom: 0px;
background-color: white;
border-style: groove;
border-color: darkblue;
}
#navBar {
background-image: url(Images/navBG.jpg)
height: 73px;
border-style: dotted;
}
</style>
<script type="text/javascript">
<!--
// -->
</script>
</head>
<body>
<div id="top">
<center>
<img src="Images/CircleBanner.png" style= "border-style: none;" align="center">
</center>
<div id="navBar">
alex wait
</div>
i have 2 divs one is a navigation bar, the other is the pages main contents. the contents and navigation links changes from page to page so i need a method so if the content is long, the navigation will stretch down long too to be the same height of the content, and the same thing vice versa. how do i go about doing this? Hi all! After trying more then a few things I'm about to give up, so I hope someone here has the answer. The problem is the following: * A website contains 3 DIV columns and an header at the top, this is all inside a single wrapper DIV which centers the webpage. * All three columns should have the same length as the longest column. * When the content in the 3 DIV columns is shorter then the height of your browser window, the DIV elements should fill-out until the bottom of the screen. Point 2 is doable. Point 3 is doable. But the combination of point 2 and 3 seems quite hard. Hope someone has an idea . Thanks! Hey everyone, I'm having troubles with some DIVs. I'm trying to divide a page into 4 equal sections. If I remove the doctype declaration, it looks right in Firefox 3.5.2 In ie it is all sorts of crazy. 100% height of the inner objects seems to be referencing the window height and not the parent elements height. I'm more concerned about Firefox anyway. I expect IE to require some hacks. If I set an absolute size to the body, in px, everything works fine. But if I have the body set to %, things shrink. I tried creating a wrapper div and setting it's height/width to 50% but that didn't work either. I tried to find a solution on kravvitz and bon rouge's sites but I didn't find anything that was 100% fluid. Any ideas? HTML4Strict Code: Original - HTML4Strict Code <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <style> body{ width:100%; height:100%; padding:0; margin:0; color:#ffffff; background-color:#000000; } object{ float:left; clear:both; width:80%; height:100%; background-color:#cccccc; } .section{ float:left; clear:none; width:48%; height:48%; margin:1%; background-color:#333333; display:block; position:relative; } .panel{ float:left; clear:none; width: 16%; height:96%; margin:2% 2%; background-color:#cccccc; } #container{ float:left; clear:both; width:100%; height:100%; min-height:100%; background } </style> </head> <body> <div id="container"> <div class="section"> <object data="http://www.google.ca"> </object> <div class="panel"> <a href="#"> test </a> </div> </div> <div class="section"> <object data="http://www.google.ca"> </object> <div class="panel"> <a href="#"> test </a> </div> </div> <div class="section"> <object data="http://www.google.ca"> </object> <div class="panel"> <a href="#"> test </a> </div> </div> <div class="section"> <object data="http://www.google.ca"> </object> <div class="panel"> <a href="#"> test </a> </div> </div> </div> </body> </html>
I have a 3 column layout. Each column may contain one or two articles with a border at the bottom of each article. The There are two borders between the three columns. I'm trying to use floated divs as containers for each of the columns, with a left-hand border in the center and right columns. You can see a non-css example at: http://www.sananselmopreschool.org/pilot/ Well, no matter what I do, I haven't been able to get the column containers to extend to the bottom of the page in IE. If I set them to height:100%, they seem to shoot out to 150% or so. body { height:100%; padding:0; margin:0; background-color:#ECF6DD; font-family: Tahoma; font-size: 11px; color: #707070; text-align:center; border: 1px solid purple; } .body_container { position: relative; height:100%; width:100%; left: 0px; border: 1px groove darkred; } .body_position_center { height:100%; position:relative; width:780px; margin-right: auto; margin-left: auto; border-collapse:collapse; border: 1px solid #999 ; } .header { padding:0; margin:0; position:relative; width:766px; height:195px; } .leftblock { position: relative; height:100%; border-left:3px dotted #228B22; float:left; width:250px; } .centerblock { position: relative; height:100%; border-left:3px dotted #228B22; float:left; width:250px; } .rightblock { position: relative; height:100%; border-left:3px dotted #228B22; float:left; width:250px; } .blockcontents { padding-top:14px; padding-bottom:14px; border-bottom : 3px dotted #228B22; text-align:left; } Any suggestions would be appreciated. I haven't used much javascript, so unless I can see an example, it might be tough to work out a javascript solution. Hey guys, so I've cleaned up my code a bit. Read up on semantic coding. I think it's a bit better. Anyways, I'm trying to make my right and left content div's the same height. I've tried the faux technique, and it doesn't seem to work. Anyways, I was wondering if it's worth the 5 hours of headache to avoid using tables to setup the layout? I think it would be nice to have it in DIV's, that way if I want to switch left to right, and vice versa, it would be a breeze. Also, for the content, I'd like the left (main) side to be the remainder of the page width, and I'd like the right side to be 260px. If it works better, I wouldn't mind having the main part 77% of the width and the right side be 23%. Anyways, here's my code: html4strict Code: Original - html4strict 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>Beta</title> <style type="text/css"> <!-- @import url("layout.css"); --> </style> </head> <body> <div id="container"> <!-- Site Head --> <div id="header"> <div id="banner"></div> <div id="head_user_container"> <div id="head_avatar"><img src="img/layout/avatar_test.jpg" alt="User Avatar" /></div> <div id="head_user_info">Welcome <a href="">Mike Jensen</a> (<a href="">Sign Out</a>)<br /><a href="">Edit Profile</a><br /><a href="">Message Center</a></div> </div> </div> <!-- End Site Head --> <!-- Menu --> <div id="menu"> </div> <!-- End Menu --> <!-- Start Top Ad Banner --> <div id="top_ad"> </div> <!-- End Top Ad Banner --> <!-- Main Content Container --> <div id="content_container"> <div id="main_content"> eh... </div> <div id="right_content">right content <br />yes sir</div> </div> <!-- End Main Content Container --> </div> </body> </html> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> and heres my css: Code:
/*Basic Elements*/
body {
font-family: "trebuchet MS", calibri, verdana, arial, sans-serif;
font-size: 13px;
color: #303030;
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
padding: 0 20px;
background-color: #d8d8d8;
}
p {
margin-top: 10px;
text-align: justify;
font-family: "trebuchet MS", calibri, verdana, arial, sans-serif;
font-size: 13pt;
line-height: 10pt;
}
a:link {
text-decoration: underline;
color: #417cb3;
}
a:visited {
text-decoration: underline;
color: #417cb3;
}
a:hover, a:active {
text-decoration: underline;
color: #5e9cd5;
}
acronym {
font-weight: bold;
border-bottom: 1px dotted #417cb3;
}
/*Specific DIVs*/
#container {
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
padding: 0px;
max-width: 1204px;
min-width: 950px;
height: 100%;
clear: both;
text-align: left;
position: relative;
}
/*- Banner -*/
#header{
background-color: #417cb3;
height: 74px;
width: 100%;
clear: both;
float: left;
border-left: solid 1px #496986;
border-right: solid 1px #496986;
}
#banner{
background-image: url(img/layout/not_yet.jpg);
background-repeat: no-repeat;
float: left;
width: 284px;
height: 74px;
}
/*End Banner*/
/*Head User Info*/
#head_user_container{
background-image: url(img/layout/logged_info_bg.jpg);
background-repeat: repeat-x;
clear: both;
height: 66px;
position: absolute;
right: 4px;
top: 4px;
}
#head_avatar{
background-image: url(img/layout/ban_avatar_bg.jpg);
height: 66px;
width: 64px;
float: left;
background-repeat: no-repeat;
padding-top: 1px;
padding-left: 1px;
}
#head_user_info {
background-image: url(img/layout/logged_info_end.jpg);
background-position: right 0;
background-repeat: no-repeat;
min-width: 225px;
max-width: 500px;
float: left;
height: 66px;
margin-left: -1px;
font-family: "trebuchet MS", calibri, verdana, arial, sans-serif;
font-size: 13px;
color: #FFFFFF;
padding-top: 4px;
padding-right: 3px;
padding-bottom: 0px;
padding-left: 5px;
}
#head_user_info a:link {
text-decoration: none;
color: #5dbdfa;
}
#head_user_info a:visited {
text-decoration: none;
color: #5dbdfa;
}
#head_user_info a:hover, a:active {
text-decoration: none;
color: #7fc9f8;
}
#head_user_end {
float: left;
background-image: url(img/layout/logged_info_end.jpg);
background-repeat: no-repeat;
height: 66px;
width: 3px;
}
/*End Head User Info*/
/*Menu*/
#menu{
background-color: #417cb3;
background-image: url(img/layout/menu_bg.jpg);
background-repeat: repeat-x;
height: 34px;
width: 100%;
clear: both;
border-left: solid 1px #94aec5;
border-right: solid 1px #94aec5;
}
/*End Menu*/
/* Top Ad Banner*/
#top_ad{
background-color: #ededed;
height: 109px;
width: 100%;
clear: both;
border-left: solid 1px #94aec5;
border-right: solid 1px #94aec5;
}
/*End Top Ad Banner*/
/* Main Content */
#content_container{
width: 100%;
overflow: hidden;
clear: both;
border-left: solid 1px #94aec5;
border-right: solid 1px #94aec5;
}
#main_content{
background-color: #fff;
clear: both;
margin-right: 260px;
}
#right_content{
width: 260px;
background-color: #ffead1;
position: absolute;
right: -1px;
top: 217px;
}
/* End Main Content */
Here's the site, and what it looks like right now: http://24.16.238.252/sd_beta/working/layout2/ Anyways, thanks for all your help guys! If you need more info, let me know! Here's the template I'm working on: http://dhost.info/justusvizslas/template.php Here's my problem: I'm trying to create a centered, two-column layout with a header and a footer, sort of like the tutorial he http://nemesis1.f2o.org/aarchive?id=7 I've got everything working correctly and it looks fine in IE. However, in FireFox, the container div doesn't automatically adjust its height to be the same as the height of the divs inside. Instead, I have to set the height at a certain number of pixils to even get the container div to show up. When I do that, in IE the container div defaults to the same height as the larger of the two inner divs, but in FireFox the container div just stays at whatever pixil height I specified. That becomes problematic because I don't plan on having all my pagecontent divs with the same height. Any insight will be greatly appreciated. I've been looking at this for hours and haven't gotten it to work like it should. Here's the relevant code too: CSS Code: #container {
width:792px;
height:50px;
margin: auto auto;
color:#000000;
background-color:#FFFFFF;
background-image:url(design/menuimage.gif);
background-repeat:repeat-y;
}
#navigation {
width:125px;
height:auto;
padding:0px;
float:left;
margin-top:auto;
vertical-align:top
}
#pagecontent {
width:667px;
height:auto;
padding:0px;
float:left;
margin-top:auto;
color:#000000;
background-color:#FFFFFF;
text-align:center
}
PHP Code: <div id="container"> <div id="navigation"><?php include "nav.php"; ?></div> <div id="pagecontent"> <br />Some more content here<br /> </div> </div> Again, thank you in advance for any help with this. If you're stumped and think it should work as-is, go ahead and go to the actual template I'm working on (first http link in this post) and look at it in IE and in FireFox to note the difference. What I have: I have a <div id="content"> that contains the main content of the site. In this <div> I have two other <div>s that are arranged in columns, using float. The left column forms the Navigation for the site and is surrounded by a black border. Here is the problem: If the content on the right is small, the border on the left stretches from top to bottom (since the left div controls the height). However, when there is a lot of content on the right, the border on the left only surrounds the content of the left div and leaves space underneath the bottom border-line. My question: Is there a way to "stretch" the left div so the border touches the top of its parent div on top and the bottom of its parent div on the bottom? Or in other words: Can I force the left div to have the same height as the right div? Here is an example of what I have right now (before tackling the problem): CSS: Code:
#content {
width: 800px;
margin: 0;
padding: 0;
}
#contentNav {
width: 140px;
float: left;
border: thin solid black;
margin: 0;
padding: 0;
}
#contentMain {
width: 600px;
float: right;
margin: 0;
padding: 0;
}
HTML: Code: <div id="content"> <div id="contentNav"> <a href="">Link1</a><br /> <a href="">Link2</a><br /> <a href="">Link3</a><br /> </div> <div id="contentMain"> <p>Here comes a lot of text that spans over many lines. </div> </div> Hello, not sure I know how to explain this. I have a page that I want to divide in two parts. To do so I am using floats. The problem is that the content in one div is not the same as the content in the other div and therefore the height of the two floated div is different from one another. However, I want that the div's have a border that seperates them and I would like this border to be from top to bottom of the containing div regardless of which of the two floated div is the highest. I could do this with javascript but I would like to know if there is some pure html/css option. Here is my example; Code:
<html>
<head>
<style>
.main {
margin: 0px auto;
width: 800px;
border: 2px solid red;
}
.wrap:after{
content: ".";
display: block;
position:relative;
height: 0;
clear: both;
visibility: hidden;
}
.wrap{
display: inline-block;
}
/* Hides from IE-mac \*/
* html .wrap{height: 1%;}
div.wrap{display: block;}
/* End hide from IE-mac */
.left {
float: left;
width: 100px;
}
.right {
float: left;
width: 680px;
border: 10px solid blue;
}
</style>
</head>
<body>
<div class="main">
<div class="wrap">
<div class="left">My left div has more.<br/>more..<br /><br />more...<br /><br /><br />lines then the right one</div>
<div class="right">My Right div has only one line but need border till down there ...</div>
</div>
</div>
</body>
</html>
As you can see in the example the border of the right div does not go down till the bottom border of the main div. I was experimenting this weekend with some CSS 'page-sculpting', using small divs to make shapes, etc. I used FireFox as my testbed and of course everything went smoothly. I switched over to IE6 and saw that every div had a minimum height-it looked like 1em. I specified height and width on all <div>. Some used borders, some did not. An example would be: PHP Code: <div style="height:2px; width:3px; background:green" ></div> Has anyone else come across this or know of a fix? I haven't tried <span> or other tags (I will...just thought of that), tho I suspect they'll behave the same. Any help appreciated. NotGoddess Hi, I have been puzzle for a while now working out how to do this. I have two fixed height divs which I want to appear on the same line (inline). However to maintain the fixed height they cannot be set as display: inline; (Well that works in IE but not in Firefox). Anyway I find out that setting one div to float left and the other to float right with another div with clear:both works fine. However when it comes to setting the position of the flash elements I want in each div element it works now in Firefox but not in IE. I currently have: <div id="diva"> <object id="face1" width="320" height="110"> <param name="face1" value="face1.swf"> <embed src="face1.swf" width="320" height="110"> </embed> </object> </div> <div id="divb"> <object id="face2" width="320" height="110"> <param name="face2" value="face2.swf"> <embed src="face2.swf" width="320" height="110"> </embed> </object> </div> <div id="clear"></div> With the relavent css: #div1 { background-image : url(images/bg1.gif); width: 381px; height: 346px; float: left; text-align : center; vertical-align : bottom; } #div2 { background-image : url(images/bg2.gif); width: 381px; height: 346px; float: right; text-align: center; vertical-align : bottom; } #clear { clear: both; } img { border: 0px; } #face1{ padding-top: 220px; left: 30px; } #face2{ position: relative; top: 220px; left: 10px; } Effectively what I want is: Where the divs are on the same line and are fixed height (as they have a background) and then each swf element releatively positioned inside the div...which will work in Firefox and IE! Thank you for your time. I am new to CSS so bare with me if this is dumb, i have taken my page to the bare minimum trying to diagnose this. Mozilla Firefox does not seem to work with nested divs the way I think it should. IE7 works like a champ. I have a content area (mainpage) with a Vertical Navigation bar nested in it. I would expect the page to have a full background of coatedmetalsm.jpg since the mainpage is set to height: auto; But this only works in IE and Mozilla has no background. Can someone show me the error of my ways? Thanks, Carlos 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>Heimburger Construction Company LLC - Links</title>
<link href="custom.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div id="header"> </div>
<div id="maincontent">
<div id="navbar">
<p>testing</p>
<p>testing</p>
<p>testing</p>
</div>
</div>
</body>
</html>
My CSS Code:
@charset "utf-8";
/* CSS Document */
body {
background-color: #000;
margin-top: 17px;
margin-bottom: 15px;
}
#header {
background-image: url(images/header.jpg);
margin:0 auto;
height: 167px;
width: 810px;
background-repeat: no-repeat;
}
#maincontent {
background-image: url(images/coatedmetalsm.jpg);
background-repeat: repeat;
margin:0 auto;
width: 810px;
height: auto;
}
#navbar {
float: left;
width: auto;
position: relative;
}
I cannot figure this out. I've tried adding clear: both in several places, I've tried overflow: hidden and I've tried cursing. Nothing works! How can this be fixed so that in IE6 the divs are not staggered vertically?? Code: <div style="height: 38px; margin: 0px; padding: 0px; width: 140px;"> <div style="float: left; height: 38px; width: 38px;"><img style="border: 1px solid #444444; vertical-align: middle" src="http://www.diversifieddesigns.com/GRAPHICS/Spacer.gif" alt="" width="38" height="38" border="0"></div> <div style="float: right; height: 38px; width: 102px;">copy</a><br>copy</a></div> </div> <div style="height: 38px; margin: 0px; padding: 0px; width: 140px;"> <div style="float: left; height: 38px; width: 38px;"><img style="border: 1px solid #444444; vertical-align: middle" src="http://www.diversifieddesigns.com/GRAPHICS/Spacer.gif" alt="" width="38" height="19" border="0"></div> <div style="float: right; height: 38px; width: 102px;"><img style="border: 1px solid #444444; vertical-align: middle" src="http://www.diversifieddesigns.com/GRAPHICS/Spacer.gif" alt="" width="38" height="8" border="0"></div> </div> example page: here css The links in the footer aren't available in FF (IE is OK)... I thought it had something to do with not clearing the floats, so I added that, now the red boarder(that I was using to try and get a visualization) goes around the whole content div, but the links still are clickable... I read about this somewhere, but I couldn't decipher the fix, and I can't find the page again... How do I fix this? Thanks Bryan This may be a pretty vague question, so I'm sorry in advanced. But I'm working on one of those recipe websites that you get as an assignment during school. Everything seems to be working, like adding comments, writing up recipes, etc. But for some reason, I'm having a huge issue with apostrophes. Whenever I want to add a comment to a recipe that involves an apostrophe in any way, it says "Sorry, there was a problem with your comment." I mostly want to know why this happens on websites instead of getting the direct "this-is-how-you-fix-it" answer, because i've seen this happen on other websites. |
|||||||