|
CSS - Inherit Height Of Parent Div When Floating.
Hello there,
I have a question about floating and automatic heights. First, i don't want to use tables becouse of layout etc... I want to have a "row" with 3 seperate "columns". Each "Cell" should have the same height as the heighest "Cell". Now this is where the problem is. The height isn't correct . I Tryed height: auto and 100%. But nothing is working. How can i fix this? Thx in advance. CSS: Code:
.divRow {
float: left;
position: relative;
height: auto;
margin: 2px 0;
}
.columnTo, .columnMessage, .columnDate {
height: 100%;
float: left;
padding: 0;
padding-right: 2px;
background-color: #f0f0f0;
vertical-align: middle;
}
.columnTo {
width:75px;
overflow: hidden;
background-color: #ff0000;
}
.columnMessage {
margin-left: 2px;
width:270px;
overflow: hidden;
background-color: #00ff00;
}
.columnDate {
margin-left: 2px;
width:40px;
overflow: hidden;
background-color: #0000ff;
}
HTML Code: <div class="divRow"><div class="columnTo" style="background:#ffad39">Column#1:</div><div class="columnMessage" style="background:#ffad39">Column#2:</div><div class="columnDate" style="background:#ffad39">Column#3:</div><div class="clearBoth"></div></div> <div class="divRow"><div class="columnTo clearBoth">Foobar #1</div><div class="columnMessage">This is a peace of text etc.. etc.. etc.. etc.. And Some more text, and some more..............</div><div class="columnDate">blah</div><div style="clear:both"></div></div> <div class="divRow"><div class="columnTo clearBoth">Foobar #1</div><div class="columnMessage">This is a peace of text etc.. etc.. etc.. etc.. And Some more text, and some more..............</div><div class="columnDate">blah</div><div style="clear:both"></div></div> Similar TutorialsHello everyone! my apologies if this is a dumb/old question - I did a search but didn't find anything like this... Question is, how can I make a page within an Iframe inherit the parent pages css? Reason is, I have a site with a css switcher (using php - a copy and paste job, still learning!) that uses iframes. Or would I be better ditching the iframes and using hidable DIV's? cheers guys! Hi all 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> new document </title>
<meta name="generator" content="editplus" />
<meta name="author" content="" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<style>
body {
}
.page {
background-color: red;
}
.menu {
float: left;
width: 100px;
background-color: yellow;
height: 100%;
}
.content {
margin-left: 101px;
background-color: blue;
height: 100%;
}
</style>
</head>
<body>
<div class="page">
<div class="menu">asdf</div>
<div class="content">content<br />asdf</div>
</div>
</body>
</html>
Is there a way to make the yellow div.menu exactly as high as the height of the enclosing div.page? So div.menu and div.content have always the same length no matter which of them has the longer content? Thanks for help Josh Here is a small snippet of my CSS: Code:
body {
font-family: verdana, arial, sans-serif;
color: #0A142B;
background-color: #006699;
margin: 0;
padding: 0;
width: 100%;
height: 100%;
text-align: left;
}
#main {
background-color:#FFFFFF;
height: inherit;
padding: 5px;
}
My question is that in the <div id="main"> how can I get that to set the height to 100% from the body, I have tried both setting it to 100% and inherit and it just stays the same height. Hi everybody Is there a way to inherit the height of a surrounding table cell? <td> <a href="..." style="display: block;">...</a> <!-- Should have the same height as the td --> </td> Thanks for help :-) Josh Hello I have struggled to understand this issue. I have a large container and I want 2 or more dives to stay side my side but if I apply float left to the div(s) it leaves the large container. How do I do it so that the left divs push the large container with them. I've included my example. and a screen shot here [IMG]atrexstudio.com/float_left/Untitled-4.jpg[/IMG] <body> <style type="text/css"> .container { width: 600px; background-color: #0F0; } #left1{ background-color: #633; height: 100px; width: 100px; float: left; } #left2 { background-color: #639; height: 100px; width: 100px; float: left; } </style> <div class="container">why do the two left divs jump out the container? <div id="left1">left</div><!--left --> <div id="left2">left2</div> </div><!--container --> </body> </html> If I can understand this then I will not have to keep setting the length of the container manually. Thank you I appreciate you time. Pretty much what the title says. I have a parent div that I fill up up floating div's using javascript, but the parent won't grow. Only ie7 is a problem. To see the problem... Link is here... http://esteemforthehome.stealthwd.c...electedPageID=7 Add a couple products to the cart, click on "View Cart"... Filling in shipping info and click "Calculate Shipping". Its the "viewCartShippingOptions" div that doesn't expand. Thanks in advance http://cwin.redirectme.net/ext/ch/test.html ^ On IE, this works fine, the parent is red as expected, whereas on Mozilla, the parent has a white background. If i have no floats, it works as expected Hey, I've got a little issue with my new wordpress template. I can't set my right column to height: 100%. This is how the template looks like Code: <div id='maincontainer'> <div id='sidebar'> <div id='mainpage'> With following position css: Code:
#maincontainer {
position: relative;
}
#sidebar {
float: right;
}
Now I need that sidebar column to go all the way down, i thought of setting height: 100% and setting it to maincontainer also as sidebar is relative to maincontainer. What works is setting a height in pixels but this is not what I want as it makes small pages very long. Has anybody experienced a similar problem or is able to shed some light on the issue. I've been looking at it for some while and it's beginning to annoy me greets, found what I was looking for. I am trying to make sure that the body div takes up all the available space in div container (the parent div), however: Code: height: 100%; makes it take up 100% of the whole page, not just the container. Here is my source code: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Home -- OpportunIT</title> <link href="main.css" rel="stylesheet" type="text/css" /> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> <link rel="alternate" type="application/rss+xml" title="OpportunIT News Feed" href="http://www.sphinxgaming.com/OpportunIT/" /> <link rel="shortcut icon" href="favicon.ico" /> </head> <body id="test"> <div id="container" class="rounded-corners"> <div id="header">OpportunIT</div> <div id="nav-menu"><ul> <li><a href="?page=home">Home</a></li> <li><a href="?page=software">Software</a></li> <li><a href="?page=about">About us</a></li> <li><a href="?page=contact">Contact us</a></li> </ul></div> <br/><br/> <div id="body"> Welcome to OpportuneIT!<br/> <br/> <b>What's New:</b><br/> <a href="?page=sinc">SiNC Framework Announced</a><br/> SiNC is a framework used to manage computers and networks in a secure,<br/> reliable, easy to learn and use way. SiNC can make almost any network<br/> management tasks simpler, such as transferring a file over a secure<br/> connection, running commands on or even remotely controlling computers,<br/> checking the status of various servers, computers and online services<br/> automatically, simplifying networked programming tasks and managing network<br/> security.<br/> <br/> <a href="?page=home">Renamed and Redesigned!</a><br/> We have been renamed to OpportuneIT, and are working on a brand new<br/> website... Stay tuned for more info on this.<br/> </div> </div> </body> </html> Code: html, body {
height: 95%;
}
#container
{
height: 100%;
width: 95%;
margin-left: auto ;
background: #FFFFFF;
margin-right: auto ;
}
#nav-menu ul
{
list-style: none;
padding: 0;
margin: 0;
}
#nav-menu
{
margin-left: auto ;
margin-right: auto ;
width:40em
}
#nav-menu li
{
float: left;
margin: 0 0.15em;
}
#nav-menu li a
{
height: 2em;
line-height: 2em;
float: left;
width: 9em;
display: block;
border: 0.1em solid #dcdce9;
color: #0d2474;
text-decoration: none;
text-align: center;
}
#body
{
height:auto;
width: auto;
margin-left: auto ;
background: #FFFFFF;
margin-right: auto ;
padding: 5px;
}
#header
{
margin:0px;
padding:0px;
background: #000000;
width:auto;
height:54px;
font-family:Verdana;
font-size:30px;
text-align:center;
color:#FFFFFF;
border-bottom: #AAAAAA solid 5px;
}
#footer
{
margin:0px;
padding:0px;
background: #000000;
width:auto;
height:24px;
text-align:center;
color:#FFFFFF;
}
.rounded-corners {
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
-khtml-border-radius: 20px;
border-radius: 19px;
border-style:solid;
border-width:20px;
}
Thanks in advance. This is something I've never been able to figure out a good solution for. I've found a few posts about the same issue, but in more specific terms. Quite often they also speak about how to fill the entire viewport in some way. Anyway. Let's say we have a container: <div id="container"></div> Inside this container we have sort of a caption element. An element that is dynamic in height. Font size, padding, margins and the like will affect how high it gets in the end. <div id="container"><h2>My Dynamic Height caption</h2></div> Now. If i add another "sub container" in there. How do i make it take up the remaining space (height) of the parent container, no matter the size of the parent container and no matter the size of the sibling's dynamic height content (the h2 in this example) <div id="container"> <h2>Caption</h2> <div id="subContainer"> I want this div to be as high as what's left of "container" </div> </div> I know I can do this with javascript, calculating exact dimensions of subContainer based on the current environment. I even have a CSS solution, making "container" position relative and positioning subContainer absolute with left,right,bottom = 0 and top = somewhat close to how high the h2 is. Any other ideas? 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> that is basically the question. I have a main div, where content will dynamically be placed, so it will change height frequently. However, It has rounded corners, so either side of it I have 3 images, 2 of which are the corners, and one is a repeating y image. If i set a fixed size for the containing div's height(<div id="submaincontainer">), everything will jump to that.(everything else is set to inherit) However, if it's height is set to auto (which is really what I want) everything will be 1px tall. (URL address blocked: See forum rules)/cv/cv.html This is my first project with trying to strictly use div tags and CSS rather than a table. A table seems like it would be incredibly easier. Anyone know how to make this work? Just a quick question. Do IFrames inherit css from the parent window? Because in firefox is seem to but in IE it doesn't. Any explaination? Or do I have to replicate every CSS class in print? That would double the size of my CSS file! What's the correct way? Will this work as I hope? Code:
div.news {
width:690px;
padding:10px;
margin:0;
float:left;
background-color: #DDDDDD;
}
.button_div {
width:180px;
padding:10px;
background-color:#953956;
cursor:pointer;
}
.body_text {
color:#284186;
line-height:130%;
font-size:11px;
}
@media print {
div.news {background-color:#EEEEEE;}
.button_div {display:none;}
.body_text {color:#000000;}
}
Also, is it ok to do this? Any issues I should be aware of? Code:
// CSS
p.italic {font-style: italic;}
p.large {font-size: 150%;}
// HTML
<p class="italic large">Italic and large.</p>
Thanks, Hi all, I am trying to automate everything on my test website and I have one more angle to cover. In effect, I want to adjust the line-height property (which I can do) based on the number of files within a specific folder (PHP and already done). The more files in the folder, the lower the line-height value must be. This is to ensure if I copy additional files into the folder, then the navigation menu (which is PHP reading files in this particular folder) will alter the CSS line-height property accordingly to ensure it can never exceed a certain height. Sounds wierd? go to www.re3.org.uk (next to the RE3 image, I have a list of hyperlinks which are obtained from files within the folder) My problem, when adjusting the CSS property (which is set as cm in *.css file) in javascript, it doesn't correspond correctly, the line-height property in javascript doesn't appear to be work in cm but some other measurement. Does anyone know how to change what unit of measurement Javascript works in? Or does anyone know what unit of measurement javascript uses when adjusting line-height / line-width values? I want to create a mini-algorithm that works out the appropriate line-height based on the image height (got that already) and the number of files in the folder (got that too) so the menu automatically adjusts to fit. Whew! Hello everybody! I have been having a big problem with my webpage for a long time now and hope I can find an answer to my problem with your help. I want a div that contains the content of my pages (which varies in length depending on the individual page) to stretch the length of my page, but it only stretches the length of the window. Here's the HTML and CSS: HTML (I only included the very basic structure): <html> <body> <div class="container"> <div id="content"> <div id="..."></div> <div id="..."></div> <div id="..."></div> <div id="..."></div> </div> </div> </body> </html>` CSS: html, body { height: 100%; font-family: Arial; font-size: 10px; color: #000000; background: #FFF url(../../images/body.png) no-repeat center 40px; margin: 0; position: relative;} .container { height: 100%; width: 960px; margin-right: auto; margin-left: auto; position: relative;} #content { width: 939px; min-height: 100%; position: relative; top: 210px; left: 6px; box-shadow: 0px 0px 8px #666; -moz-box-shadow: 0px 0px 8px #666; -webkit-box-shadow: 0px 0px 8px #666; background-color: #FFF;} I tried to set the content div to overflow: auto, but that includes a scroll bar for the content div that I do not want. It does, however, create the desired effect of the shadow and background of the #content div all the way to the end of the page. Am I missing anything? I thought min-height would work, but it doesn't! It only stretches the content div to page height and everything else is overflow, but without the content div's background color and shadow. Does anybody maybe see where the problem lies? Thank you so much in advance for your help. I've never done much CSS work, but I know this has to be an easy fix. Each DIV appears to be 10px higher when viewed in IE. I want them to be 8px high and they end up being 18px high. In Firefox, Netscape, and Opera it works fine. Anyone mind correcting this imbarrassing little problem? Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
<title>IE 10px Padding Problem</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
body {
margin:0px; }
#container {
position:relative;
margin:auto;
width:730px; }
#header {
height:110px; }
.textualtop {
border:1px solid #000000;
height:8px; }
.textualbottom {
border:1px solid #000000;
height:8px; }
</style>
</head>
<body>
<div id="container">
<div id="header"></div>
<div class="textualtop"></div>
<div class="textualbottom"></div>
<div class="textualtop"></div>
<div class="textualbottom"></div>
<p>Notice how in IE6 each DIV is 10px higher then in FF. Why is it doing this?</p>
</div>
</body>
</html>
It seem that everytime I added the image tag, the div'x area get bigger in IE but not in Mozilla/Firefox browser. So, I thought by added the "margin-bottom:-360px;" to the div would fix it but it had an opposite effect. Meaning it worked in IE but Mozilla show a vertical scrollbar. So, does anyone know how can I make the <img> overlap one another without being stacked on one after another in height for IE if I take out the "margin-bottom: -360px;"? Thanks... Code:
div.divBox1
{
width: 286px;
height: 359px;
float: left;
}
div.divClearFloat
{
clear: both;
height: 0px; /* For IE Stupidity (it added some spaces after clearing the float) */
font-size: 1pt; /* For IE Stupidity (minimum height only work with current font-size somewhere) */
}
div.divDottedLineAdvertisementSeperator1
{
width: 575px;
height: 3px;
background-color: #ff0000;
font-size: 1pt; /* For IE Stupidity (minimum height only work with current font-size somewhere) */
}
Code: <div class="divBox1"> <div style="margin-bottom:-360px;"> <img src="images/doctor.jpg" style="position:relative;top:0px;left:0px;z-index:2;"> <img src="images/we_help.jpg" style="position:relative;top:-360px;left:0px;z-index:1;"> </div> </div> <div class="divClearFloat"></div> <div class="divDottedLineAdvertisementSeperator1"></div> |
|||||||