I've got 2 divs side by side. One has a fixed with of 150px (sidebar) and one adjusts to the remaining with of the parent div.
<div style="margin:0 20%">
<div style="float:left;width:150px">
Sidebar contents
</div>
<div style="vertical-align:top">
Main contents
</div>
</div>
When the contents of the "main" div exceed the remaining width, it's expanded and pushed down under the sidebar. How can I stop this without defining a set width for this div (since it's meant to adjust to the parent width)?
margin-left:150px for the second div? or use padding-left:150px for aligning content
http://jsfiddle.net/5TYm2/ here is a working example of something I believe you're looking for.
This is a pretty common way to go about separating content within a wrapping div.
Hope this helps.
Related
I'm trying to create a layout where there are two adjacent elements inside a main container - the first, a block of text and the second, an image that expands outside the top border only of the container, by say 20px. I want both the text container (A) and the image (B) to be flexible widths, while both respecting the padding of the outer container.
The markup looks something like this:
<div>
<div>
<h1>Heading</h11>
<p>Subheading</p>
</div>
<div>
<img />
</div>
</div>
I want the to grow taller than the container but still be pinned to the bottom right of the container, without the container growing larger than the second <div>. Is there a neat way to do this?
Desired Layout
what I am trying to accomplish is the following:
<div>
<div class="img"><img src=""></div>
<div class="img"><img src=""></div>
<div class="img"><img src=""></div>
</div>
the divs containing the images will be used in a slideshow so they need to be positioned one on top of the other, with the first one showing and the others hidden.
When I set position:absolute to the divs though, the external div's height shrinks and destroys the whole layout. Any tips on how to to fix that?
EDIT: HTML structure is not negotiable.
Ended up setting the div's height with JQuery according to it's content. Just needed to add one line of code in the loop. Case closed.
I think your approach is wrong, the way to do this is not to have the divs stacked on top of each other with absolute positioning. Set the css on the last two divs to display:none. When you want to move to the next image, set the image as display:block. (example shown uses JQuery)
$("div#image2").show();
and then hide the other two
$("div#image2").siblings().hide();
You'll need to add an id attribute so you can uniquely select your images.
I am having cross-browser trouble with a DIV layout on the following page:
www.richmindonline.com/index2.html
I have created a border around both the divs to make it easy to identify.
It appears that IE9 is nesting the inner DIV correctly within the outer DIV, whereas Firefox is separating the divs differently. I am using a "cheat" tag in order to align the divs to center, but I test without those tags and the browsers still render them differently.
The divs in question are located under my comment line:
I know you guys are smart, and I'm looking for your help! Thanks, Rob
You need to clear floated divs by adding something like: <br clear="all"/> or <div style="clear:both; height:0;"></div> and add a width to the parent div, this should fix it.
More info: A common problem with float-based layouts is that the floats' container doesn't want to stretch up to accomodate the floats. If you want to add, say, a border around all floats (ie. a border around the container) you'll have to command the browsers somehow to stretch up the container all the way.
e.g.
<div class="parent">
<div style="float:left"></div>
<div style="float:left"></div>
<div style="float:left"></div>
<br clear="all"/>
</div>
For more information: http://quirksmode.org/css/clearing.html
I have a similar problem as CSS Auto Margin pushing down other elements: A right floating sidebar gets pushed down below the main non-floating content div. The answer proposed works: just reverse the order of the markup and write out the float div before the non-float div.
For example, this:
<div class="container">
<div id="non-floating-content">
fooburg content
</div>
<div id="float-right">
test right
</div>
</div>
needs to be awkwardly re-ordered as:
<div class="container">
<div id="float-right">
test right
</div>
<div id="non-floating-content">
fooburg content
</div>
</div>
So then, why does this also work without reordering: Elastic layout with max-width and min-width using grid based design?
Check out the live demo. The ordering of the markup is still sensible: the float div is written out after the non-float div. Yet the float doesn't get pushed down on the page.
I ask because I would prefer not to have to hack the theme PHP (to reorder divs) in order to properly style it.
Other posts that also say the solution is to "re-order your divs":
2 column div layout: right column with fixed width, left fluid
Semi Fluid Layout CSS/Html
The reason this works is because your containing element has no height. When you have nothing but floated elements inside a containing element, it will collapse to 0 height. If you were, for example, to add overflow: hidden; to #fluidColumnContainer, it would act as a clear-fix, expanding the container to contain the floated elements. Then you would see the right-floated element drop down again.
the reason the one you linked works is because the other columns are also floated
I have several divs that I set up to be positioned next to each other. However, when I resize the window to be smaller, the 2nd and third div from the left drops below the first one. How do I make it so that instead of dropping underneath the first div, the browser would show she horizontal scroll bar?
Do you have fixed width set to these divs?
Please post your html code of the divs
Either you need to put a width to the parent container div as suggested by Arun or post your html to let us see
Set the width of the parent div to some value.
<div style="width: 700px">
<div>Content1</div>
<div>Conten2</div>
<div>Conten3</div>
</div>