I've posted a fiddle Click Here
i've set the display property of both div's as table-cell. and width of one of the div is set to 24%. but i don't get the result in screen. am i doing something wrong?
I don't know gor what reason you set the display of the divs to table-cell. That makes not really sense in your case.
Set the divs "recent-cell" and container to float:left and you will have no problems with the fluid behaviour.
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
Can I set the height of a div inside a table to 100%? Failing that, can I use a span instead?
I've seen this answer but it doesn't mention anything about 100%.
[I need to use divs because they have dynamic content loading into them]
EDIT
In the images below you'll see that display is table-cell, I've set it to block and inline-block with the same result
Yes you can as long as the element is block or inline-block as it states in the answer you posted. Div's are block level by default and spans are inline, so need css display:inline-block or display:block.
Like this? If you uncomment the // from before the height, it fills the td it is inside, is that what you are asking?
I have this:
http://jsfiddle.net/UHrLH/1/
I set the height on the box element to auto, but min-height is 200px;
Now if i try to make more content in the first box, the height expands but it creates a big white space under it. I do not want that, i want to have the box under eachother like you can see above, where the height on all boxes is 200px
See the issue here:
http://jsfiddle.net/UHrLH/2/
http://jsfiddle.net/chricholson/UHrLH/10/
This will give you boxes inline but unfortunately the pairs will not extend to match the height of it's partner. To do this you will need to use tables or a javscript overwrite to capture the height. Also, bear in mind display: inline-block will not work on divs in IE7 and below, it would work on a span though: http://www.quirksmode.org/css/display.html#t03
http://jsfiddle.net/UHrLH/11/
I have added an additional div if that is ok for you...
<div class="box_Container">
I've got a div that contains an unordered list that gets updated by an ajax query. It's used for a livesearch.
Now I have this problem that when I set the height of the div to a fixed height (let's say 200) that the results are shown as they should. But when I don't set the height, or set it to auto, the div has a height of 0 when the searchresults are added to the ul.
I think this has something to do with the ajaxquery and the browser not recognizing the new height, but I don't know how to set it the right way.
How can I fix this?
Thanks in advance,
Try adding some dummy content statically on the html page and see if the height is still 0. If it is then you have a CSS issue. Most probably the contents of the div (list) are absolute positioned so the parent div cannot know the list's height.
You can try adding adding a min-height to the div containing the ul.
min-height: whatever-you-want-minimum-height;
Here is my site, first of all.
You'll notice that underneath the divider bar in the middle of the page, there are three columns, one with a form, one with text, one with links.
Now, resize the window to slightly smaller, and the right div will drop down to the next line.
Is there anyway to just not display that? So, the divs will adjust (I have a liquid layout) up to the point where they won't fit, then, instead of wrapping the div down to the next line, it just won't be displayed?
You can also achieve that with CSS only.
Just assign the following CSS attributes to #row4:
#row4 {
min-width:1202px; /* the exact value depends on the sum of the width of your 3 column boxes */
overflow:hidden;
}
This differs slightly from your intended solution, since the right box will stay partly visible when sizing down the window and will not immediately disappear completely.
Please be aware that min-width won't work in IE6. However, there are several ways to emulate the min-width property, if you need to support old IEs:
http://www.thecssninja.com/xhtml/ie6-min-width-solutions
You can give them a wrapper div with a min-width set and force it to use a horizontal scrollbar if it gets too small. The nice thing about a wrapper div is you can give it a max-width as well and keep things from getting wonky on super huge monitors.
I'm not a fan of horizontal scrollbars, but it beats completely removing content.
Ok here is what you should do
Wrap all three floated division on a parent div, something like this
<div id="parent">
<div class="form">......</div>
<div class="text">......</div>
<div class="links">.....</div>
</div>
Now to solve your problem give a fixed height to the parent div like
#parent { height:400px;clear:both; }
You would have to use Javascript to get the width of the viewport, then change the display property of the div that is wrapping to display:none so that it doesn't show up when the browser width is too small.