I'm developing a web page that has an outer floated left column and a regular right column.
The right column then contains a list of items where each item has a floated left column and a regular right column.
My problem is when a list item's right column isn't tall enough, the next list item is indented to be to the right of the previous item's left column.
Convoluted? Okay, well I've posted the basic layout online.
I then removed items from a sublist so that one list item's right column isn't tall enough.
Finally, I tried correcting the problem using clear:both. The problem is that this clears the very outer floating div.
Is there any way to clear a floated element without clearing another, outer floated element?
In addition to your clear: both style, add an overflow: hidden or overflow: auto style to .MainRightCol to give it its own block formatting context:
.MainRightCol {
background-color:#f5f5f5;
overflow:auto;
}
This prevents the clear: both from clearing the .MainLeftCol float, because
The 'clear' property does not consider floats inside the element itself or in other block formatting contexts.
and the context which .MainLeftCol lives in is body's (or the viewport's, I'm not exactly sure), so that's outside of .MainRightCol's and its .ListItem children's, which you apply the clear to.
See the updated demo.
Related
In the CSS code below, it appears that the background of divTwo has moved behind divOne. But the content of divTwo appears to have been left behind - why does the background of the div appear to move independently of the content?
#divOne {
width: 300px;
height: 100px;
background-color: yellow;
margin:5px;
float:left
}
#divTwo {
width: 300px;
height: 100px;
padding:5px;
background-color: green;
}
<div id="divOne">Div01</div>
<div id="divTwo">Div02</div>
result in Chrome
The content of divTwo is not moving independently. The content is text, so it's rendered in a line box.
Now while unfloated, uncleared blocks ignore the presence of floated elements that precede them, the line boxes that they contain don't. The line boxes will avoid the floated element and go either alongside the floated element or, if there's no space for them there, underneath the floated element.
In your example, there is no space alongside, so the text has gone underneath the floated element. But since you've set a fixed height for divTwo, there's not enough space underneath and yet inside divTwo for the line box either. So the text content overflows divTwo, hence the text appears without divTwo's background behind it.
From Mozilla provided Float Documentation
How floats are positioned
As mentioned above, when an element is floated it is taken out of the
normal flow of the document. It is shifted to the left or right until
it touches the edge of its containing box or another floated element.
So I imagine when you declare float for divOne but not divTwo, then divTwo is following the normal flow of the document which is the same position as divOne.
You may also find Documentation for CSS Display useful.
If you do want these inline, but do not want to declare float for divTwo you can use:
#divOne {
width: 300px;
height: 100px;
background-color: yellow;
float:inline-start;
}
#divTwo {
width: 300px;
height: 100px;
padding:5px;
background-color: green;
}
This is something quite frequently met in just simple HTML. In you current code, you are not using any containers, wrappers or rows. This leads for the elements to overlap, if you want them not to overlap, you should give them some positioning or padding. In the provided fiddle, I have added a padding of 50 px for the divTwo in order to increase it's box show it is seen better.
The main idea is that you never start simply writing code but carefully think about the positioning of each element on your webpage. A good practice would be to learn how to "stack" elements( That's how I call it, the term might not be correct). Another thing is that there are some certain front end frameworks which could teach you better by example how to do this.
Bootstrap, Zurb Foundation (But Bootstrap...I'm not sure how many people use Zurb)
Here's the JS Fiddle to see how exactly the div has changed:JS Fiddle
Like #ZobmbieChowder said, the logic of CSS float property is that you have a huge box which contains two smaller boxes, and now you want one is located on the left and another on the right. If you don't have the huge box first, the complier doesn't get human's logic which one shall be the left or right. It only makes sense for machine that you "define" a container first, then talk about its element position left or right.
Alternative to #jpat827 answer would be to either set div two's clear property to left or add an empty div after div one and set it's clear property to left. What
The clear property, if there is no space left for the unfloated element, prevents the unfloated element from going under the floated element.
When you clear the div two to left, then what it really does is that it places div two below the floated element.
let's say, div one was floated to right, then you would have to clear div two to the right, in order to bring it below div one.
If, there were three divs, out of which two were floated to left and right, then the clear property for the third unfloated div must be set to both so that it can clear past elements floated in either direction.
I hope this was helpful.
Thank You
I am trying to use <span> to address some tabular data which I want to position relative to the container edge, the container being a WordPress Toggle.
I have tried this in CSS
.px_update_number {
position: relative;left: 2em;
}
.px_update_date {
position: relative;left: 4em;
}
.px_update_notes {
position: relative;left: 6em;
}
and this in the HTML
<span class="px_update_number">SP1</span><span class="px_update_date">2015.04.16</span>
and the spacing is relative to the "column" before. If I use Absolute in the CSS then alignment is relative to the page edge, not the Toggle. And I need the toggle because there is going to be a ton of data, and at any one time someone is going to be looking only for a very specific bit.
So, am I just implementing this wrong? Or am I barking up an empty tree and I need to reconsider some aspect of what i am trying to do?
OK, so nesting s helped, but I am still having an issue. I would expect this
<span class="px_update_number">#<span class="px_update_date">DATE<span class="px_revitupdate_build">BUILD</span></span></span>
<span class="px_update_number">FCS<span class="px_update_date">2016.04.18<span class="px_revitupdate_build">20160225_1515</span></span></span>
to produce a header row with good alignment. But instead the alignments are off. Despite now getting multiple rows of the actual data to seemingly work right.
And, not sure I have it right yet, as this
<span class="px_update_number">R2<span class="px_update_date">2015.10.22<span class="px_revitupdate_build">20151007_0715</span><span class="px_revitupdate_notes">All Updates after R2 are subscription only</span></span></span>
<span class="px_update_number"><s>1</s><span class="px_update_date">2015.12.17<span class="px_revitupdate_build">20151209_0715<span class="px_revitupdate_notes">Expired</span></span></span></span>
still shows a misalignment in the second column, as if it's being aligned to the right side of the first column, not the left, so when the number of characters in the first column changes it throws everything off.
link to MCVE
span tags are inline by default. But left settings (as well as top, bottom and right) only affect block elements (which also need to have a defined position other than static). So in your CSS those left settings do nothing.
As a quick fix you can add display: inline-block to the CSS classes you posted above.
ADDED AFTER COMMENT:
Here's a codepen:
http://codepen.io/anon/pen/YWEEbg
position: relative; plus a left setting will move the element by the given value. But the space kept free for the element is not moved. So if you give your first element left: 2em; and the second element also left: 2em;, it will look as if there is no space between them.
So if you want the second element to be 4em right of the first one, you actually have to give it left: 6em; (as in my codepen)
2nd ADDITION:
Here http://codepen.io/anon/pen/rLYYXz I used margin-leftinstead of left, which does what you probably want: It creates space between the elements, without the complication of the left setting as described above.
3rd ADDITION:
Cange the position: relative to absolute and again use left (not margin-left). Now the distances are measured in relation to the parent elements upper left corner, so the second element will stay at the same position regardless of the contents of the first one:
http://codepen.io/anon/pen/grXopb
If all that is in a parent container, it will have to have `position: relative:
http://codepen.io/anon/pen/zBPpqa
You should use table tag, or grid layout to solve your problem.
So your layout would relate to column width, but not to left element.
I have a list of items, each one has a right aligned part and a left aligned part. The left aligned part should expand freely, but stay underneath the right aligned part without pushing it to the next line
what is happening:
|this is an expanding area of text|
|-other stuff-|
what should happen:
|this is an expanding area o|-other stuff-|
^
the last part of the text is cut off here
right now I am using float: right and float: left but how do I stop them from wrapping? The other stuff is always the same stuff, but is rendered with a different width on different browsers, so I cannot specify exact widths and use overflow: hidden
You can achieve this using a combination of overflow and float. This works due to the fact that overflow: hidden establishes a new block formatting context. To paraphrase:
The border box of an element in the normal flow that establishes a new block formatting context (such as an element with 'overflow' other than 'visible') must not overlap the margin box of any floats in the same block formatting context as the element itself (in which case the box itself may become narrower due to the floats).
See: http://jsfiddle.net/m8x1g0q8/
It seems to me that we get a totally different behavior when floating 2 divs instead of one.
In this example http://jsfiddle.net/nwZC3/2/ the left-sidebar floats inside the main div.
<div class="left-sidebar" style="float:left; width:10%;"></div>
<div class="main" style="width:70%;"></div>
But in this one http://jsfiddle.net/m77na/9/ the main div, which this time has float:left style does not float inside the right-sidebar, the difference being that we also have another floating div in the layout.
<div class="left-sidebar" style="float:left;width:10%;"></div>
<div class="main" style="width:70%;float:left"></div>
<div class="right-sidebar" style="width:20%;"></div>
I tried to find a floating rule in the spec (w3c visual formatting model) to explain this behavior but I didn't find any.
When you float only .left-sidebar, what happens is that it floats against the content of .main only. The .main element itself is positioned as if .left-sidebar were not there at all — that is, .left-sidebar has been taken out of the normal flow that .main participates in.
When you float both elements, what happens is that .left-sidebar floats against .main itself. The result is that the two boxes stack against each other side by side. The .main element is positioned following the float of .left-sidebar because both of them are floating. The content within .main is unaffected by the .left-sidebar float.
Section 9.5.1 of the spec has very concise descriptions of the float property and its values. Specifically,
left
The element generates a block box that is floated to the left. Content flows on the right side of the box, starting at the top (subject to the 'clear' property).
It also specifies in detail how exactly floats should interact with other content and other floats. There are several rules but only the second one applies to your example (it basically means "left-floating boxes must stack against one another, if not horizontally then vertically"):
Here are the precise rules that govern the behavior of floats:
...
If the current box is left-floating, and there are any left-floating boxes generated by elements earlier in the source document, then for each such earlier box, either the left outer edge of the current box must be to the right of the right outer edge of the earlier box, or its top must be lower than the bottom of the earlier box. Analogous rules hold for right-floating boxes.
...
I am having an issue with collapsing divs in CSS! But not the normal issue. That would be too easy. I have a left floating div which contains two left floated divs. The first of the left floated divs contains text. If the second inner floated div's style is empty, everything works fine and the outer div encompasses the text and both inner divs. What i need to do is set the width of the second div to 10px. Instantly when I do this the outer div collapses to 10px, squishing the text div down. What!? I am able to find some reference to this behaviour existing, but nothing comprehensive about what it is really and now to work around it.
Do you mean to clear the floats? you can overflow:hidden; zoom:1 if the element containing the floats isn't already a float, or if it already isn't somehow clearing them.
It would help if you jsfiddle.net it.