float:right causes parent div to shrink - html

<div style="width:50%;" class="outerdiv">
<div style="">
<div style="display:inline;">
<span><?php echo __('Başlık :', 'goldmem');?></span>
</div>
<div style="display:inline; float:right;">
<input class="postptext" type="text" id="posttitle">
</div>
</div>
</div>
I have this layout. Outerdiv has borders so I can see it's size change. This is the result :
Without float : http://i.imgur.com/F73U0jX.png?1
With float :http://i.imgur.com/8berzkN.png?1
How can I make it so that the size of the div contains all the elements.

Try adding overflow: hidden; to .outerdiv - as this creates a new Block Formatting Context for it's descendants (which are taken out of the normal flow, because they're floated, similar to the way absolutely positioned elements are, but not identical) - it basically allows the container to acknowledge the presence of the float as if it were in the normal flow. The key is to remember that regular block-level elements in the normal flow will ignore a float if it isn't cleared or if a new block formatting context isn't provided.

You can also add a div at the bottom that will clear all floating items. Add this to your html:
<div style="display:inline; float:right;">
<input class="postptext" type="text" id="posttitle">
</div>
<div class="clear"></div>
And add this to your css:
.clear {
border: none;
clear: both;
}
It will display as is shown here in JSFiddle:

Related

Ways to align divs side by side in another div

I used 4 different ways to align nested divs side by side. I expect these 4 ways to be correct, but only one is working (float). Can somebody explain why ?
<div style="background-color:black; width:100px; height:100px;">
<span style="background-color:red;width:70%;height:100%;"></span>
<span style="background-color:blue;width:30%;height:100%;"></span>
</div>
<br/>
<div style="background-color:black; width:100px; height:100px;">
<div style="background-color:red;width:70%;height:100%;display:inline"></div>
<div style="background-color:blue;width:30%;height:100%;display:inline"></div>
</div>
<br/>
<div style="background-color:black; width:100px; height:100px;">
<div style="background-color:red;width:70%;height:100%;float:left"></div>
<div style="background-color:blue;width:30%;height:100%;float:left"></div>
</div>
<br/>
<div style="background-color:black; width:100px; height:100px;">
<div style="background-color:red;width:70%;height:100%;display:inline-block"></div>
<div style="background-color:blue;width:30%;height:100%;display:inline-block"></div>
</div>
Or JSFiddle
Thanks in advance.
A <span> isn't a block element, so it doesn't have width and height.
The same goes for <div>'s set to display: inline.
This works as you expected.
You can remove the white space between the div's to make it work. Elements set to inline-block have a space between them just like two words would. That's why you could also set font-size: 0; and it would work.
You could do the same as #3 but with position: absolute.
this is painfull... but the first one, the span is an inline element, so is the second set the div that has the style="inline" attached to it. This means they wont accept any height or width styles, as they are not blocks!
Your first example uses SPANs, SPANs are an inline element and therefore you cannot apply a height or width to them.
Your second example, you are changing a BLOCK element (DIV) but changing it into an inline element cannot apply a height or width to them.
Floating an element removes it from the flow of the document, so different rules apply, and you can apply width and height
The last example will work if you remove the white space between the 2 nested DIVS:
<div style="background-color:black; width:100px; height:100px;">
<div style="background-color:red;width:70%;height:100%;display:inline-block"></div><div style="background-color:blue;width:30%;height:100%;display:inline-block"></div>
</div>
http://jsfiddle.net/kKScJ/76/
try this:
give on div inline style code as float:left;
it give as align div all are one side one
<div style="background-color:black; width:100px; height:100px;float:left;">
<span style="background-color:red;width:70%;height:100%;"></span>
<span style="background-color:blue;width:30%;height:100%;"></span>
</div>
<div style="clear:both;"></div>
<div style="background-color:black; width:100px; height:100px;float:left;">
<span style="background-color:red;width:70%;height:100%;float:left;"></span>
<span style="background-color:blue;width:30%;height:100%;float:left;"></span>
</div>

Div content in same line

Following is the js fiddle
http://jsfiddle.net/zk7Uf/1/
<div style="width:200px">
<span class="span-blankPDF">
<label for="Employments_2b6131a8-d5c3-40d6-85f7-ecec0d315e56__ReasonForLeaving">Reason for Leaving:</label>
</span>
<div class="div-PDF" style="display: inline;width: 50px;">Reason to livelong</div>
</div>
The result i want is like this with the above divs width should not be increased.
Reason for leaving:Reason
to livelong
I think this is what you are looking for :
http://jsfiddle.net/BY294/
<div style="width:200px">
<span class="span-blankPDF" style="float:left">
<label for="Employments_2b6131a8-d5c3-40d6-85f7-ecec0d315e56__ReasonForLeaving">Reason for Leaving :</label></span>
<div class="div-PDF" style="display: block;width: 50px; float:left">Reason to livelong</div>
</div>
Position them baby!
You want the span to float left so it has a point of reference, then you want the next div to be a block as its its own entity as such and float that left to 'lean' on the span you have..
Or else i have completely misunderstood the question, in which case im not to blame! :)
Assuming your span element should remain a span and the div inside should remain a div, you can do it nicely with some CSS.
Use the display: inline-block to get rid of how span and div position themselves by default. Then use vertical-align: top to make the elements in the same line align on top of their containers.
So, without changing the widths (as you requested) and just adding some CSS, you can write it like this:
<div style="width:200px;">
<span class="span-blankPDF" style="display:inline-block;vertical-align:top;">
<label for="Employments_2b6131a8-d5c3-40d6-85f7-ecec0d315e56__ReasonForLeaving">Reason for Leaving</label>
</span>
<div class="div-PDF" style="display:inline-block;width:50px;vertical-align:top;">Reason to livelong</div>
</div>
Se live demo here: http://jsfiddle.net/Vg6RG/
EDIT: You get the same result sa Pogrindis suggested, but this one is not using floating.

CSS: Label/Input wont float in IE7

I am having problems with floating a label and input next to each other in IE7. I have tried everything I can think of:
Giving it a fixed width
Overflow hidden,border, background.
Wrapping inside of a div with float left.
The only way I can get it to work correctly is if I put it inside a table.
Try to make a clearing div under each row.
Like
<label>Username</label><input type="text" name="username"/>
<div class="clear"></div>
<label>Password</label><input type="text" name="password"/>
<div class="clear"></div>
.clear {
clear:both;
}

4 Column Div Layout

I am trying to create a 4 column <div> layout.
Why are the row containers not drawing a border around the respective row?
Also, is this a good approach, as in is my css written well to be fluid and for dynamic resizing of the browser window?
Any suggestions or help would be most appreciated.
Here is my current attempt.
You need to set the overflow to auto when using float. http://jsfiddle.net/gJJHs/
The problem seems to be that you are floating your columns, and when you float things, they take up effectively zero space.
I think the solution is to cancel the float in you "last" class and add a "dummy column" to each row.
This CSS seems to work:
.col
{
float: left;
width: 25%;
}
.last{
clear: left;
}
.row{
border: 1px solid green;
}
Revised HTML (with dummy last column):
<div class="row">
<div class="col">1</div>
<div class="col">2</div>
<div class="col">3</div>
<div class="col">4</div>
<div class="last" />
</div>
<div class="row">
<div class="col">5</div>
<div class="col">6</div>
<div class="col">7</div>
<div class="col">8</div>
<div class="last" />
</div>
When an element is floated, its parent no longer contains it because the float is removed from the flow. The floated element is out of the natural flow, so all block elements will render as if the floated element is not even there, so a parent container will not fully expand to hold the floated child element.
As such, the border will seem like it is not bordering anything :( Take a look at the following article to get a better idea of how the CSS Float property works:
The Mystery Of The CSS Float Property
As others have said, if you add overflow: auto; to your .row class, it'll take care of the problem. Here's another article that explains why to use overflow.
http://www.quirksmode.org/css/clearing.html
I hope this helps.
Hristo
it's the float left. That takes the divs "out of flow" and it's drawing the border around empty space essentially
Yet another option, in addition to the other answers, is to add overflow: hidden; to your .row.
The reason for the behavior you saw is that float takes the div outside of the normal flow. The div then essentially takes up no space in the document.
This makes sense if you think about the ostensible purpose of floating an image in order to wrap text around it. The next p tag (for example) is positioned as if the floated image wasn't there, i.e. overlapping the image. Then, the browser wraps the text within the 'p' tag around the image. (If the floated image was not "removed from the flow", the p tag would naturally appear below the image—not giving the desired effect.)
Here's how I'd write the code.
HTML:
<div class="row">
<div class="col">1</div>
<div class="col">2</div>
<div class="col">3</div>
<div class="col">4</div>
</div>
<div class="row">
<div class="col">5</div>
<div class="col">6</div>
<div class="col">7</div>
<div class="last">8</div>
</div>
CSS:
.col
{
float: left;
width: 25%;
}
.row{
border: 1px solid green;
overflow: hidden; /* "overflow: auto;" works just as well instead */
width:100%; /* Helps older versions of IE */
}
Add a "float:none;clear:both" to your .row and you'll see the rows appropriately. But for the fluid behavior and design that you are looking for, you'll want to apply some javascript (like jQuery Equal Height: http://www.jainaewen.com/files/javascript/jquery/equal-height-columns/) to be consistent across browsers without a ton of CSS hacking.

Why do <fieldset>s clear floats?

Consider the following test case, in which a floated and an inline element are placed inside a <fieldset> versus a <div>:
.float {
float: right;
background-color: red;
height: 200px;
}
<h1>With fielset</h1>
<fieldset>
<span>Inline!</span>
<div class="float">Float!</div>
</fieldset>
<fieldset>
<span>Inline!</span>
<div class="float">Float!</div>
</fieldset>
<h1>With div</h1>
<div>
<span>Inline!</span>
<div class="float">Float!</div>
</div>
<div>
<span>Inline!</span>
<div class="float">Float!</div>
</div>
When rendered, fieldset containers are 200 pixels tall (they clear the floats?) while the div containers are only as tall as the inline elements. What is the cause of this behavior, and is there a workaround which allows the fieldset containers to behave as the div containers do?
Apparently <fieldset> elements are supposed to generate block formatting contexts for their contents:
The fieldset element is expected to establish a new block formatting context.
That's why floated elements don't float out of them. I would guess that this has to do with the nature of fieldsets as visual form control groups. There could be other reasons, but off the top of my head that sounds the most plausible.
There doesn't appear to be a way to undo this, but I wouldn't be surprised; you can't destroy a block formatting context after creating it.
By the way, <fieldset>s don't clear floats (unless you give them a clear style of something other than none). When an element clears floats (or is said to have clearance), it clears only the preceding floats that touch it within the same formatting context. A parent element doesn't clear its children's floats either, but it can establish a formatting context for them to float in. This is the behavior seen with <fieldset>, and it's also what happens when you set overflow to something other than visible on a parent element.
From the spec (emphasis mine):
This property indicates which sides of an element's box(es) may not be adjacent to an earlier floating box. The 'clear' property does not consider floats inside the element itself or in other block formatting contexts.
Additionally, as mentioned in the comments, there is no clearing style defined by browsers for that element, so the default clearing style would already be the default value of none. This is shown in this demo, in which only one of the <fieldset>s coming after the floating box is defined to have clearing properties and is indeed the one clearing the float.
.float {
float: right;
background-color: red;
height: 200px;
}
.clear {
clear: right;
}
<div class="float">Float!</div>
<fieldset>
<legend>Fieldset!</legend>
</fieldset>
<fieldset class="clear">
<legend>Clearing fieldset!</legend>
</fieldset>
External link of the demo
Set height for wrapper div;
<html>
<head>
<style type="text/css">
.float {float:right; background-color:red; height:200px;}
</style>
</head>
<body>
<fieldset>
<span>Inline!</span>
<div class="float">Float!</div>
</fieldset>
<fieldset>
<span>Inline!</span>
<div class="float">Float!</div>
</fieldset>
<div style="height:200px">
<span>Inline!</span>
<div class="float">Float!</div> </div>
<div style="height:200px">
<span>Inline!</span>
<div class="float">Float!</div>
</div>
</body>
</html>