I'm trying to build the following structure on a page on my website:
The black border is the content container. The red border is the left content container and the gray area is the right content container with a gray background.
Now, I want the right content container to expand vertically dependent on the height of the left content container, so they will always have the same height.
How exactly do I go about this? Anyone know of a work-around to make the divs behave like a table would?
Thanks in advance!
All the best,
Bo
You use CSS display:table on the wrapper and display:table-cell on the left and right content. The only catch is lack of support in IE7 and below.
Floating columns with Dan Cederholm's faux column background technique: http://www.alistapart.com/articles/fauxcolumns/
An oldie but a goodie.
Related
I have a container div with three child divs. see attached.
the center div can dynamically stretch in height. what I want is if the container div would stretch with the center div, then the left div will stretch to fit the new container div, and therefore stay in sync with the center div.
any one knows a pure css way to do this?
This doesn't actually adjust the height of the column, but the only non-javascript way to achieve this effect without actual content pushing the height down is using faux columns. You apply a background image to the parent element that mimics the column. Doesn't apply as well to responsive design, but the good folks at A List Apart do a better job of explaining the method here http://www.alistapart.com/articles/fauxcolumns/
yes that makes sense if you have a bottom-border. Let us know if you need help with the javascript. There will be no pure CSS way to accomplish this though. You have to find the height of the center div with javascript, and tell your left div to be the same height.
How can I put the height of side by side DIVs?
When I change the width of browser, sometimes the left div get higher or shorter than the left.
I want that automatically the left or the right div grows up to became with the same height of the other one.
Setting a display table-row is the best solution for this?
Take a look at the image of the page I want to develop.
http://i.imgur.com/BhvV2.png
I solved the problem using display=table-row, table and table-cell. I've added one div to be the table.
Now it is perfect! Take a look.
http://jsfiddle.net/tcWCC/47/
Here's a solution, also found on SO
http://jsfiddle.net/kaAjW/
Here is the link to original post
How do I keep two divs that are side by side the same height?
The technique is called Faux Columns and here is an article about it
http://www.alistapart.com/articles/fauxcolumns/
I solved the problem using display=table-row, table and table-cell. I've added one div to be the table. Now it is perfect! Take a look.
http://jsfiddle.net/tcWCC/47/
If what you are trying yo do is to place the content in a grey box with rounded conrners then your divs don't need to be of the same height. Just move the background-color and border-radius to the enclosing div: http://jsfiddle.net/tcWCC/41/
I think you won't be able to do that without using a html table.
I am trying to align some divs a certain way. To help debug what's happening, I decided to add borders to the divs to research how they were getting positioned. But the border looks pretty strange.
Here's the html:
Here's the CSS:
And here's the result:
What am I doing wrong? Thanks!
It isn't funny (!!). The div appears to have 0 height, hence the top and bottom borders are touching each other, creating a funny (??) appearance.
The div appears to contain content but the content is probably floated or absolutely positioned, therefore it does not stretch the funny (!?) div vertically.
demo here
Height is one way to do it, but its a bit hackey, another is to float the div that is surrounding other floated divs:
http://jsfiddle.net/Ewd4x/2/
I have a fixed height div and want to align an image to the bottom right corner with the text (of an unknown/variable length) to wrap around it. I'd ideally like to avoid using Javascript and the best solution so far appears to be to use a vertical spacer div above the image (which is the container height - image height) to push it down. This works perfectly on IE / FF but the text overlaps the top of the image on safari (mobile and standard). I'm not sure why this is happening, I appreciate the fonts are displaying differently but surely the text should flow around the div/image either way? You can see an example of what i'm talking about at http://jsfiddle.net/deshg/XScmK/, i've just used a coloured div with some text instead of an image in this example.
Any thoughts would be massively appreciated as I'm not sure why this isn't working?
Thanks very much as ever,
Dave
in your 3rd div margin-top:20px; for a quick fix, but this will push up your 1px wide div.
also try changing these heights: 141px to 140px, and change 159px to 160px.
I am just trying to get the image box to slide up next to the BBD logo and I can't seem to figure it out.
A bit new to css and floats, etc. Can anyone offer a suggestion???
I'm working off of a template, so didn't set up the css myself.
Thanks!
link text
You will need to float both the div with the bbd logo and the div.slideshowgallery. When both siblings are floated (left for example), they will be next to each other (if the width of the containing block permits it).
A suggestion? I can give you that.
#sliderWrapper > div { float: left; }
Add this CSS and your divs will be side by side. Rounded corners and the background will break. To solve the background, add <div class="clear"></div> to the bottom of the sliderWrapper div. The rest... no idea.
always remember to work with a wrap container with a specific width otherwise is very difficult, to make this with a elastic design.
and then just float both divs... ideally on the same side and spearate them with their own margins.