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
Related
I want to create a button/link that is centered in the content area of a webpage. Because it's a button, and not just a link, I'm adding some padding and background colour to it.
The link is centered horizontally, but the padding seems to expand outside the line-height of the parent element, causing it to overlap with previous/next elements. See: http://fths.convoke.info/what-can-i-do/
I tried creating a fiddle, but wasn't seeing the same issue: http://jsfiddle.net/convoke/g9wu6ws9/
So what am I missing? Conversely, is there a better way to center a link like this? I don't like using margin: auto because it requires you specify the width. Ideally the width would be dynamic, so if the text on the button was longer or shorter, it would remain centered.
In this case, the answer I needed came from user #CBroe in the comments of my original question. He suggested using display:inline-block and that worked like a charm.
Still unsure as to why I was getting different results on the fiddle vs the actual website...
I'm having an issue with the CSS columns property. Namely, I cannot seem to get the container surrounding them to stretch to the width of the columns as seen here: http://jsfiddle.net/niaconis/43k5s/5/
Seems a lot like the similar issue with floats, only horizontal instead of vertical, but the pseudo-element clearfix doesn't help with this one.
How can I get the container to completely wrap the columns?
P.S. I know about the XY Problem, but this is merely a curiosity. I don't care about achieving the layout from the example. I do care about finding out why the container doesn't stretch to wrap its contents.
The absolute positioning of your element is causing the browser to incorrectly calculate how wide it should be when using the columns property. Remove it and the element stretches as it should.
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.
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.
I have a bunch of float: left elements and some are SLIGHTLY bigger than others. I want the newline to break and have the images float all the way to the left instead of getting stuck on a bigger element.
Here is the page I'm talking about : link
If they are all the same size if works beautifully : link
Thanks! (I'd rather not get into javascript or server side scripting if I don't have to)
Well, if you really need to use float declarations, you have two options:
Use clear: left on the leftmost items - the con is that you'll have a fixed number of columns
Make the items equal in height - either by script or by hard-coding the height in the CSS
Both of these are limiting, because they work around how floats work. However, you may consider using display: inline-block instead of float, which will achieve the similar layout. You can then adjust their alignment using vertical-align.
I fixed it by removing float:left, and adding display:inline-block instead. Haven't used it for images, but should work fine, there, too.
Use display:inline-block
You may also find vertical-align: top or vertical-align:middle useful.
This is what I did. Seems to work in forcing a new line, but I'm not an html/css guru by any measure.
<p> </p>
You can wrap them in a div and give the div a set width (the width of the widest image + margin maybe?) and then float the divs. Then, set the images to the center of their containing divs. Your margins between images won't be consistent for the differently sized images but it'll lay out much more nicely on the page.
This is an old post and the links are no longer valid but because it came up early in a search I was doing I thought I should comment to help others understand the problem better.
By using float you are asking the browser to arrange your controls automatically. It responds by wrapping when the controls don't fit the width for their specified float arrangement. float:left, float:right or clear:left,clear:right,clear:both.
So if you want to force a bunch of float:left items to float uniformly into one left column then you need to make the browser decide to wrap/unwrap them at the same width. Because you don't want to do any scripting you can wrap all of the controls you want to float together in a single div. You would want to add a new wrapping div with a class like:
.LeftImages{
float:left;
}
html
<div class="LeftImages">
<img...>
<img...>
</div>
This div will automatically adjust to the width of the largest image and all the images will be floated left with the div all the time (no wrapping).
If you still want them to wrap you can give the div a width like width:30% and each of the images the float:left; style. Rather than adjust to the largest image it will vary in size and allow the contained images to wrap.
Add to .icons div {width:160px; height:130px;} will work out very nicely
Hope it will help