I have 2 divs side by side. The first div contains text. The height of this div can vary, depending on how much text it contains.
The second div contains an image.
I would like the image to be the same height as the first div.
Is there a way to do that in css ?
I use bootstrap grid system. Both divs have the col-md-6 class.
Related
I need to have 2 equal width divs side by side, the left column contains an image and the right column will contain dynamic text where the height of the text div can vary somewhere between 400px - 550px depending on how much text the site owner inputs.
I need the image to line up flush at the top and bottom with the end of the text box. The container element is fluid to be responsive.
Desired Effect
What I have at the moment is using floats to line the elements up together and responding fine, but the image falls short, like so:
I tried setting the image as a background-image on the left column with...
.column-image{
padding-bottom:100%;
margin-bottom:-100%;
background-size:contain;
}
But this still falls short a little unless i tweak the padding-bottom amount. This is then rendered useless when I re-size my browser as the aspect ratio changes.
I am trying to avoid using Javascript to solve this.
Use display:table for the container and display:table-cell for the inner divs. Also make sure to remove the float
Fiddle: http://jsfiddle.net/afelixj/26b3vtfx/2/
I have an html page. This page has the following structure:
<body>
<div id="div1">....</div>
<div id="div2">
<table>...</table>
</div>
<div id="div3">....</div>
</body>
The div are one beneath the other,they have a border, and their's width are the same.
User can grow the columns of the table, which is inside the div2. In this situation the width of the div1 resized (border grows).
However the other divs' width remain the same.
How i can make them follow the width of the div2?
div 1 and 3' width is not dependant of div 2 as they are their own boxes, you have to link the boxes somehow (all three are part of body, but body may be bigger than your table at all times so linking their width to body may not work on certain browsers/versions)
Without javascript: create a bigger div that contains div1, 2 and 3, set the width of the other divs to that of the bigger div using CSS, whenever the table grows/shrinks div 2 will grow/shrink and push the boundaries of its parent div. Because div 1 and 3 copy their width from the bigger one, they will grow/shrink as well.
With javascript: Just set the width of the other divs whenever you modify the table's, tables can't be resized usually so you must be using some javascript there
In all cases, research CSS because that's what you will be changing.
I am trying to create a site layout using CSS. I have four (4) DIV elements. One is the main container that I have centered in the page and contains all the other DIV elements. Of the remaining three DIVs one is a page header, one is a left menu and the last holds content for the page. I would like to have the CONTENT DIV floated such that it is adjacent to the MENU DIV. However, I am finding that the width of the CONTENT DIV is not using the width I specified. I have created a sample running on JSFIDDLE which should make it easier to visualize.
http://jsfiddle.net/Rrgr7/
What I am trying to figure out is why the CONTENT DIV doesn't take up 600 pixels as I have defined? Thank you.
You have to float your content also. Your content div is 600 from the left not counting the float and if you add more text it will run down under the menu: example.
If you float it, then it will do what you want, but you have to be careful about sizes or it will float down under your menu.
If you just give it a 200px margin and no width, I think that would work best as it would use the remaining space and stay 200px from the left edge. The float doesn't push it further, the margin is from the container div.
I am currently trying to figure out an way to vertically align an div that is inside an div that has an dynamic height due to it's changing content.
So on this jsFiddle is the setup,
in the left div you have the content that is inside an wrapper element with an fixed width. Next to that div is another div, this is an wrapper for an image and a div element. And on the right is an element with an position absolute.
The idear is that the text "this is an image" is vertically aligned to the middle of the left div which is dynamic. I would like to do it with CSS but it seems impossible...
You can check out this fiddle to get some more info
http://jsfiddle.net/36sfx/2/
It seems that the only way to do it is displaying the div as table-cell. I have tried to solve this problem many times before, and I have read before that there are technicals limitation on this issue.
Im trying to make this layout (many of these are in a list):
An image (of varying height, but a set width) on the left. To the right is an <h2>, and below that, but still to the right of the image is a div with other content in it.
The div is used to provide a different colored background. Right now, the div for some reason extends behind the image, and the images has a varying distance between them, and sometimes one element will get pushed to the right by the height of the image above.
http://jsfiddle.net/RQsUc/
Add overflow: hidden to your outermost divs (div (display: block)) to contain the floats.