Not signed in (Sign In)
SkillShare - A place to discuss Web Standards and Web Design topics
Categories
Vanilla 1.1.5a is a product of Lussumo. More Information: Documentation, Community Support.
-
I'm absolutely in love with CSS and the theory behind it, but the more and more I delve into using it, the more and more it's making me realize that it is not meant to be used for dynamic content.
In the example below the div "floatLeft2" needs to sit right next to "floatLeft1" and take up all the rest of the whitespace. I have tried the Liquid Layouts using Negative Margins and that works fine and dandy but is not what i'm looking for.
In Tables they have a simple little tag called width="100%" or in css width: 100% as you all know i'm sure. Why do they have to make it so difficult to do the simplest task in Tableless structures? I understand that when you do a Float and then apply a width of 100% it goes to the 100% of the parent block element, but is there any way to make it so it just fills up all the space till it reaches the next block element and stops. Instead of continuing and getting tossed to the bottom?
I'm getting very frustrated and would appreciate any help. I would explain more as to what i'm trying to do for the broad project, but frankly i'm too exhausted trying to figure this out.
-Jeremy
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<title>Three elements with "float: left" applied</title>
<style type="text/css" media="screen">
body
{
margin: 20px;
padding: 0;
font: normal 85% arial, helvetica, sans-serif;
color: #000;
background-color: #fff;
}
.containingbox
{
width: 400px;
height: 400px;
border: 1px solid #000;
}
.floatleft1
{
float: left;
width: 100px;
height: 100px;
background-color: #F63;
border: 1px solid #F30;
}
.floatleft2
{
float: left;
width: 100%;
height: 100px;
background-color: #F63;
border: 1px solid #F30;
}
</style>
</head>
<body>
<p>
<a href="JavaScript:history.back()">< Back</a>
</p>
<h1>Three elements with "float: left" applied</h1>
<div class="containingbox">
<div class="floatleft1">1</div>
<div class="floatleft2">2</div>
</div>
</body>
</html> -
-
CommentAuthoradjustafresh
- CommentTimeJan 15th 2008 edited
...the more and more it's making me realize that it is not meant to be used for dynamic content.
You, sir, are misinformed. CSS does just fine and dandy with dynamic content if you know how to build your templates to accommodate it.
Question: You want to float 2 DIVs next to each other in a container DIV that is 400px wide, right? One DIV has a width of 100px. The second DIV has a width of 100% (100% of its container, so 400px). Do the math, 400px + 100px = 500px. You're trying to fit 500px into a 400px wide area (I'm not even counting the borders). -
-
- CommentAuthorPettyRider
- CommentTimeJan 15th 2008
Yeah, sounds like a math error on your part. Well, not actually. You're trying to apply your old way of thinking to a newer, more accurate, more intuitive, standard way of thinking. As adjustafresh explained, in CSS, 400(100%) + 100 = 500. And, actually, a table's math is not wrong, it's just less intutive [400(100%) - 100 = 300 // notice the "minus" operator there]. -
Also, when working with widths there are other properties that add to total width of an element.
Padding and border also effect the way width is determined. So you should keep those in mind.
So #floatLeft1 has a total width of 102px. The widths are a bit different than tables, but once you understand the basics you have so much more control over your page design.
I have a tutorial on transitioning from table design to css design if you would like to see it. It helps you to see how you can make a 2 column layout. http://www.israeljernigan.com/learning-to-create-css-layout-part-1-of-2 -
Let me rephrase the question then. FloatLeft1 is going to have the ability to be toggled on/off but floatleft2 needs to span 100% to take up the white space. for when floatleft1 dissappears.
Floatleft1 is going to be a navigation and sometimes depending on the page type, the navigation needs to disappear. If i put FloatLeft2 to be 74% wide yes it does but up against it, but then when FLoatleft1 disappears obviously it stays at 74% wide. -
-
CommentAuthoradjustafresh
- CommentTimeJan 16th 2008
Don't float the .floatleft2 DIV--you don't need to set a width on it either as the default width is 100% of the parent container. The floatleft1 DIV will push floatleft2 to the left by 100px; when floatleft1 is not present, the floatleft2 DIV will take up the entire space.
You may want to reconsider your class naming conventions.Thankful People: jgunn -
-
I agree with jgunn that this is difficult. I have the exact same situation, except with a float right instead of float left, and adjustafresh's solution does not work for me because in his solution the div 2 takes up 100% width in both situation in standards-compliant browsers. One could skip the div 2 (block-level element) altogether and just go with inline elements. I can't find a solution for block-level elements.
-
I've got it now.
When div 1 is present:
apply margin-left to div 2 equal to the width of div 1 plus any margins...
When div 1 is gone:
remove margin-left using DHTML (sounds like you have some DHTML going on here anyway)
I'd probably recommend doing the DHTML switch by changing the className of a parent element and writing you stylesheets as:
.class1 .div2 {margin-left:100px;}
.class2 .div1 {display:none} -
Hi,
Just delete the "float:left" property to the class div.floatleft2 - This will force the second div to float at the right side of the div.floatleft1
But if div.floatleft2 where bigger in height, all the content will go to the left side of the ContainingBox when div.floatleft1 ends.
For complex nested divs, the using of Clearfix method is highly recommended (http://www.webtoolkit.info/css-clearfix.html)
Cheers!
,-·*’°§ aleare §°’*·-,
1 to 9 of 9