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;
}
Related
Looking at the bottom example here, if you give .after-box a margin-top:5px it doesn't make a difference as it'll stay in the same location. But if you give .box a margin-bottom:5px it'll move the .after-box down. Why is it that on floated elements, their margin matters but other elements around them don't?
Hey margins don't move floated html elements, instead they push it away.
To give a fake margins on floated elements is to put the content inside another container then apply padding.
.outer {
float: left;
padding: 20px;
}
.inner {
//styles here..
}
I have a varying number of <div>s inside a container <div>, that are each set to display:inline-block, have a -webkit-border-radius and some padding. I would like to position each of the <div>s in a way that the one to the right overlaps the one to the left enough, so that there is no break in the border on top and bottom. Also, Ideally the container <div> would only have a width that is exactly the size of the styled divs inside (hight of LAST_DIV and width equal to the distance from the leftmost to the rightmost div).
----------------
--------------------/ \
/ / | |
| DIV_1 | DIV_2 | LAST_DIV |
\ \ | |
------------------- \ /
----------------
Since the number of <div>s that will display varies, I ruled out absolute positioning. I would like to refrain from javascript or adding additional elements to the html document, since I am creating multiple styles for the same website element, and some of those styles might not have rounded <div>s that have to overlap.
Edit:
I have tried setting only a border radius to the left edge of the inner divs and giving the container div a border on top and bottom and setting a negative value for left until the overlapping border of the container div disappears. When all divs are the same hight, this gave me issues at the right end, since the container div now extended over the right end. This also gave me issues when the individual divs had different colors.
You could try it something like this:
demo
HTML:
<div class='container'>
<div>DIV_1</div><!--
--><div>DIV_2</div><!--
--><div>LAST_DIV</div>
</div>
Relevant CSS:
.container, .container div { display: inline-block; }
.container div {
padding: .25em 1.25em;
border-radius: .65em 0 0 .65em;
}
.container div:not(:first-child) {
margin: 0 0 0 -.65em; /* negative left margin, same value as border-radius */
}
.container div:last-child {
padding: 1.25em;
border-radius: .65em;
}
Note
Any kind of whitespace (space, tab, newline) between elements that have display: inline-block; set on them matters. This mean that a newline in the HTML between the divs in the container will introduce a space between them. There are a few fixes for this. The one I've chosen involves adding a comment between </div> (closing tag of a child div) and <div> (opening tag of the following div).
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.
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.
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.