I want to create a natural flow of content. The problem that I now face is that the <div>s will only line up next to each other. They will not pass the bottom edge of the floated block on the opposite side.
The following illustration clearly shows the problem. Let's say that I have 4 <div>s with variable heights:
Div1 always starts left
Div2 always is displayed on the right side
Div3 is on the left or right side, depending on the hight of Div1 and Div2
Div4 in this situation, Div4 doesn't stick to Div2's bottom
Div5 the same problem occurs
So, the position of the divs > Div2 should be determined by the height of the previous divs. Could you please advise me on how to achieve this?
After checking the Facebook CSS and HTML, I found they achieve this using a list and alternating the float on the li elements between left and right (ie, every even element is floated right)
For example:
HTML
<ul>
<li>...</li>
<li>...</li>
<li>...</li>
</ul>
CSS
li {
clear: left;
float: left;
display: block;
height: 100px;
width: 200px;
margin-bottom: 10px;
}
li:nth-child(2n) {
clear: right;
float: right;
}
Working example: http://jsfiddle.net/gBVPj/
This approach only works if an element on one side does not exceed the height of two elements on the other side. For example, in your diagram, should box 2 have a height larger than that of box 1 and 3 combined, then box 5 will be displaced and positioned inline with box 4.
Like this: http://jsfiddle.net/gBVPj/1/
I have not found an example of this problem on Facebook (one element never exceeds the height of two) so I believe that they have taken this into account. They could possibly be achieving this by using JavaScript - if you check the elements, they have a property data-height which matches the height of the element.
I worked on this last night and found a rather simple way to do.
Compare the bottom position of the left column and the right column, append the new li element to the side with smaller value, which can be done by th e following way:
var last_left_post = $('.left:last');
var last_right_post = $('.right:last');
var left_position = 0;
var right_position = 0;
left_position = last_left_post.height() + last_left_post.offset().top;
right_position = last_right_post.height() + last_right_post.offset().top;
if(left_position<=right_position){
$('#timeline').append('<li class="left"></li>');
}else{
$('#timeline').append('<li class="right"></li>');
}
.left and .right using the same css as you do.
Related
I have three divs (or any other block element): div1 is the parent, div2 and div3 are the two children. Both div2 and div3 have a fixed width. What is the necessary CSS to display div2 and div3 evenly distributed, horizontally, within div1? As in the image, I want the value of x to be equal for all three distances. I do not want to hard-code the positions of div2 and div3.
You can see a JSFiddle of my attempt here: http://jsfiddle.net/pUv85/. However, this seems to place the divs on top of each other.
Note that I want to be able to achieve this without specifying the margins explicitly. In the same way that with just one div, I could set the left and right margins to auto, I'm wondering whether there is a similar approach with two divs.
You haven't really specified a lot in your question, so I have no reason to assume that the following wouldn't work for you.
So just add equal margins to both sides of div2, then set the same margin for div3 but only on the right side, and apply float:left to both. Of course you'll have to be sure that div1 is bigger than these.
You may choose to use percentages to better fit your needs, depending on the rest of your code.
#div2 {
margin-left: 10px; /* or you could set this to any unit you want */
margin-right: 10px /* should be the same amount as above */
float:left;
}
#div3 {
margin-right: 10px /* again, should be the same amount as above */
float:left;
}
I updated your fiddle that you kindly provided just now: http://jsfiddle.net/7VQRG/1/
EDITED: Here is a jQuery way to do the margin calculation automatically - it even has an input to the right of the black box where you can specify a different width for your divs: http://jsfiddle.net/7VQRG/2/
The code sample below works almost the same, if I include or remove the 'float: left' line. The only difference is the float left version moves the blocks below it up a bit more, but not more than a line break. I don't understand why you would add floating to an element set to 100% width. To my understanding,this prevents everything below it from flowing around it. Isn't that the purpose of floating?
ul
{
list-style-type: none;
float: left;
width:100%;
padding:0;
margin:0;
}
li
{
display: inline;
}
The reason why this works is because your <li> display is set to inline. This means that all elements with of this HTML tag will show up on the same line as all other ones. In other words, there will be no line-break. I would suggest the following instead:
ul {
list-style-type: none;
width: 100%;
padding: 0px;
margin: 0px;
overflow: hidden; /* This will ensure there's a line break after using float for the list items */
}
li {
float: left;
}
This way you can ensure that each list item can also use margin and padding properly as opposed to inline elements which act as characters in a string of text normally would.
The float property is meant to allow an object to be displayed inline with the text directing it to one side. Float left is thus a lot like inline but with the exception that the element being floated is aligned towards the left or the right. It is not necessary to use the float:left; flag for what you are trying to do, It can often be better to place the ul where you want it using position, margin, padding, left , top , right , bottom instead. This usualy gives a more controllable result.
Here is an example fiddle of what happens when switching between no float and float left.
http://jsfiddle.net/um9LV/
The float CSS property specifies that an element should be taken from the normal flow and placed along the left or right side of its container, where text and inline elements will wrap around it.
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 it's containing box or another floated element.
float:left - use float to get block elements to slide next to each other
display:block - Displaying the links as block elements makes the whole link area clickable (not just the text), and it allows us to specify the width
It is possible to use position:absolute and left and right on the middle column to set where it ends in relation to the parent div.
However I'd like to be able to have the left side of the center div to start right where the left column ends, and for the left column to be adjustable (based on its content).
This seems like a really basic thing but from what I understand there is no way to do this without flexboxes. Is this true? Is there nothing I could do with clever nesting of semantically superfluous elements and certain styles set to auto?
If the right div has some set width (either in % or px), then yes, you can let the left div's width be defined by its content while letting the center div fill in the remaining space:
#right {
position: absolute; /* position in top right corner */
top: 0;
right: 0;
width: 80px;
}
#center {
margin-right: 80px; /* same as #right width */
}
#left {
float: left;
}
jsFiddle DEMO
From what I can tell you'd be better off with simple floated blocks. If you wanted to absolute position all of them together, you could wrap them in an absolute container, and float them inside. Maybe I just don't understand why you need them absolutely positioned, but this seems like a viable option.
So I have a div, 720px wide, and i'm filling it with divs that are 140px wide, floated left. I would love to be able to line these divs up flush with the left and right edges of the containing div.
Of course, the issue is that when I put a margin-right on the floated divs, the right edge won't line up due to that margin. A left margin yields the same results, but on the left edge.
Is there any way to combat this issue?
Try this: Link
You can put the elements into rows and detect first, middle, and last elements with these css2 selectors. You can specify different margins for the different positions inside.
element:first-child {
}
element:last-child {
}
element .className {
margin-left: 6px;
}
If you are using a server-side language to generate these divs you can calculate which item is last in the row by doing something like this:
<div class="column <%if iteration % 6 == 0 %>last-in-row<%end%>"></div>
and then just set the style
.column {
margin-right: 10px;
}
.last-in-row {
margin-right: 0;
}
I would like to position three items in CSS using float.
In the top left--logo
To the right of the logo, the navigation, which is an unordered list, ie floating left.
In the top right, a 2 line sign up for newsletter field--copy top row and form field with submit bottom in the second
I've given each it's own Div tag but can't see to get it to work with float. Only absolute positioning which doesn't look good when the site is resized. I put a table inside the div right now but would love a pure CSS solution.
I can get the logo to float left and the sign up field to float right but can't seem to get the navigation properly positioned. Either it goes all the way left or I put a clear in and it goes below the logo and field.
Any suggestions would be appreciated.
What about the following?
.floatleft_logo
{
float: left;
width: 200px;
}
.floatleft_nav
{
float: left;
width: 600px;
}
.floatright_email
{
float: right;
width: 300px;
margin-left:-250px;
}
Put all three in a 850px-wide container div and this works for me in a test page.
If I've understood it correctly, maybe you could set the first and second element to float: left, and then set the margin of the third element equal to the width of the first and second?
You could also set the first element to float left, the third to float right, and the second with a margin equal to the width of the first element. Like a three-column layout.