Not a front-end UI but have a (probably) very easy problem to fix. Here is a jsfiddle of it: http://jsfiddle.net/trestles/U7mYT/ I have two floated elements shown in this screen shot. One is floated left and the other (index-right-content) is floated right. The floated right div has two columns of content. The second column is much longer but doesn't expand out the box to push down the container. The index-right-content is posistion:relative. The index-right-content is the blue dashed border.
thx
edit #1
fiddle of it: http://jsfiddle.net/trestles/U7mYT/
I think the issue is the 'index-box right' which is right floated needs some way to clear itself but adding a clear:both didn't seem to do it.
don't do this full-time so thx for any help
I don't know why you should use positioning for the div index-right-content. Also, the width is more than it should be... I think I see 640px for the width, which I think is unnecessary, provided that the widths of the columns inside this div is defined.
see the updated jsfiddle adding float to both inner columns in container.
Related
I'm building a website with fluid layout and I want avoid things like setting dimensions. I'm having success in almost everything, but I have a div that doesn't work as expected. See this link: http://cssdesk.com/Bshqe.
I expect that "div_botao_comecar_convite_cadastro_b" were placed to the right of "div_descricao_curta_convite_cadastro_b", but it was placed below this div. I want that the div be placed at left.
As I say, I don't want set a width for anyone div. Sorry for bad english. Thanks in advance.
If you don't want to set a specific width but want the children elements aligned horizontally, use css3 flexboxes -
apply display:flex to #div_elementos_convite_cadastro_b and adjust the other css accordingly....
demo
more about flexboxes # CSSTricks
How to make a div to float vertically? If there is empty space above a div then it should go up and fill up the space leaving the empty space at the bottom.
float:left // for floating horizontally
I have many div which are floating horizontally with a fixed width but not a fixed height. I want them to be arranged without leaving the empty space.
How can this be done?
A div would never leave empty space above itself. It will fill the space and then the document would go on to the bottom.
I guess, there is some sort of padding or margin there.
You can try to give the divs an absolute position as:
div {
position: absolute;
top: 0;
}
This way, div will be placed almost to the top of the page! Overlapping other elements, You can give some value to top in such a way that you're giving margin-top.
I hope it helps.
Let me assume you're experiencing the following problem: you have some divs with different heights one after another in several rows. Say, there's a very tall in the first row, forcing all the divs of the second row to "dive" deeper. I have a strong feeling, that there's no cross-browser pure-css way to improve this look much at the moment. However, you can achieve at least something with
display:inline-block;
vertical-align:top
instead of
float:left.
It will look like this:
http://jsfiddle.net/wHTQ2/
if you need something better looking, please, see this question:
css float elements with unequal heights left and up in grid
I believe it's the same thing that you're looking for. Unfortunately, there's not much you can do with pure css
EDIT:
Per Mat's suggestion below, I fiddled with jsFiddle and came up with the "real" problem.
Positioning content absolutely within the center DIV doesn't produce the required results:
http://jsfiddle.net/yxFQK/22/
In order to position children absolutely, the parent needs to be relative, right? But that messes up the nice left/center/right layout:
http://jsfiddle.net/yxFQK/23/
Any ideas? Thank you in advance.
ORIGINAL POST:
We want to have a fixed-width parent DIV with three dynamic-width children DIVs:
The left and right DIVs should size based on content. The center DIV should fill the space between the left and right DIVs:
[[Left][ Center ][Right]]
(or)
[[Big Left][ Center ][Big Right]]
The center DIV should scroll overflow content (so we can't use overflow: hidden).
Also, we would like to change the parent DIV size (using CSS media queries), and have everything continue to fill in nicely:
[[Left][ Center ][Right]]
[[Big Left][Center][Big Right]]
[[Left][ Center ][Right]]
[[Big Left][ Center ][Big Right]]
Any ideas? Thank you in advance.
I don't have enough reputation to comment on your answer so I'm submitting as an answer. Is this what you're looking for?
http://jsfiddle.net/yxFQK/
Remember it's always easier to make a jsfiddle rather than try to explain visually/conceptually. If you frame the problem well it's easier for people to help you out.
On my web-site http://vfm-elita.com (it is not in English, sorry for that) - center and right columns are overlapping, please see screenshot for details:
Between left and center columns you can see a "gap" with a green background - it is expected and good.
But there are no any gap between center and right columns, instead they are overlapping.
Issue exists in all known browsers
There are no special formatting applied to columns. They are usual 'TD' columns, the only CSS modifier is width that is "250px" for left and right columns, and for center - it is "auto".
Please advise how can I correct that error.
Thanks a lot!
You have two divs with class "wrap" in the middle td element. Both divs has width: 100%. When i removed that, overlapping issue was gone.
BTW, table layout is out-of-date for more than 10 years or so.
I had a look and the quickest fix I found was to add a padding of 7px to the left hand side of the last table-cell in the table with class "fon".
I don't usually post a link to my site when asking questions, though I don't see another way around it. I apologize in advance.
I'm having difficulties with a specific page. The page consists of Team Members, where each member is its own DIV (also each team member is coincidentally a separate post in Wordpress).
For some reason, the DIVs wrapping each post are clearing left, but no clearing attributes are assigned!
The page is located here: http://engineercreativity.com/samples/comsense/?page_id=15
Please, if you can help, I'd love to hear any input.
Thanks a lot!
Amit
Divs are floating on horizontal axis and not vertically, What you are essentially looking for is a Masonry Plugin, its for jquery and should easily solve your problem.
http://desandro.com/resources/jquery-masonry/
edit:
your divs are not clearing on left, please see the computed layout
the whitespace is not because of divs clearing left, the whitespace is because of line height. When you are having two floating elements in a row, then the row will take height equal to the bigger element, so essentially each row will have white space below the smaller div. This is similar to a HTML Table.
Akinator's fix didn't work for me in FF on Win XP. If you change your float on the "team-member" class to float: left it will fix it. It is being caused by your static image being float left and the rest of the divs around it being float right.
If I understood your question correctly, you have a margin-bottom of 15px in the class .team-member, this gives and extra white space.
It should be set to 0 (or not set)
Is this what you ment?