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>
Related
I have a simple image gallery dynamically controlled by PHP to add and remove image thumbnails from a page. The problem I have is that I want the images to be aligned next to eachother until there is no room on that row and is forced to start another.
I have tried using float:left which worked but the containing body div with a height set to auto resized itself to not include the images. I then tried adding clear:both; to the images which fixed the body div issue but now has the images directly underneath eachother.
I've used float:left before in many cases but the containing div had a fixed height.
Does anyone have any idea on how I can fix this?
Thanks heaps :)
You have to add an empty div with "clear: both;" as the last element in the div containing the images.
If you add "clear: both;" to an image, that image will be placed on a new row because it wont allow floated elements on either side of it.
So here's what I want to do:
Let there be a fixed size column. The height of the column should take up the size of the parent.
Inside the column I have two divs, stacked vertically. The width of both of them takes up the column width. The height of the first div is fixed size. The second however is variable, taking up whatever remains from the parent. Moreover its content is variable. If its content is to large a vertical scroll bar should appear.
How can I do this with HTML and CSS?
Here's a quick JSFiddle POC.
My problem is that if I set the second divs height as auto it will stretch outside its parent. If I set it 100% it will be again larger than its parent. It's important that the scroll bar to appear only for the second div, not the main div itself.
Thanks,
Here is what I would do:
http://jsfiddle.net/Tfzhm/1/
Add position:relative to the container div, and make the scrollable div position:absolute. The top should be set to the same amout of pixel as the height of the first stacked div. And finally, set bottom:0px so it gets to the bottom line of the containing div.
I'm dealing with a text who goes out of its div. I've coded the frontpage. So, no matter how long the main content is, it should force the sub-content (the grey area and the footer) to move down.
You see how the dummy text is acting
URL http://nicejob.is/clients/pizzahollin/www/divproblem.htm
I've accomplish this before but somehow it's not working now.
You've set an explicit height on that div. For it to reshape itself to its content, you'll need to set height:auto. (or never set its height in the first place)
EDIT: As ANeve said, you'll need to remove the height on both .article and .opentext, as well you'll need to put a clear:left on .lower-container to push the footer down.
If you have an element that only contains floating elements, the container's height will be zero. To fix this you can add a clearing div (<div style="clear:both"></div>).
If you add a clearing div at the end of the #under-content section, it will automatically adjust the height of the section to it's contents.
The other issue you have is that you are using relative positioning on your .opentext div elements. When you set a 'top' property, it actually pushes the content down, causing it to overlap with your #lower-container. You're better off using the 'margin-top' property, which will expand the size the .opentext div to fit all the contents.
So in short:
Add <div style="clear:both"></div> at the end of the #under-content <section>
Change the 'top:82px' to 'margin-top:82px' on your .opentext div
I hope this helps!
Just use wordwrap: break-word; for the div and it will break the word to the next line.
You have set the height property of your .article and .opentext divs. If you remove this property, the content should expand accordingly.
However, you will also need to adjust the positioning of your background image. You should set the background image of .footer itself, rather than relying on one statically-sized background image for the entire page.
I have...
<div id="tabs">
<!-- ... -->
<div id="interior-photo">
<img src="...">
</div>
<!-- ... -->
</div>
... and ...
#interior-photo { overflow-x: auto; }
Basically, I have a page broken down into a main section and a fixed-width right sidebar. Within the main section, I have my tabbed div. The entire page grows with the width of the window, so when the window is resized, the tabbed div grows horizontally in size too.
My problem is that the image that I'm loading inside one of the tabbed divs is generally much, much wider than the window usually is (they're panorama pictures; very lengthy horizontally, but not much vertically).
I know that I can force the contents of #interior-photo to scroll horizontally using the CSS rule above, but that only seems to work when that same div has a fixed width. Since I want that div to have a variable width, it always seems to display the full width of the image, pushing my layout way out of whack.
I know how to fix this using Javascript, but I was wondering if anyone has a CSS-only solution. If you need more information about my layout to solve this issue, please let me know. Thanks!
Unless your target div is constrained either by a fixed width style or by a container with a fixed width or whose ancestors include a fixed width, you won't be able to get your target div to acquire scrollbars. It will just go as wide as its contents, and the browser scrollbars will take over.
Actually, there is a way around this. You can specify to display the image with scrollbars, and thus confine the viewable portion to the size of the div. Basically, the image will expand to the size of the div, and then have a horizontal scrollbar if the horizontal image size exceeds the horizontal size of the div. Scrollbars will not be displayed if the image's vertical component exceeds the div's. You can set both the x and y to scroll on overflow with the overflow declaration. However, in order to use any of these, the div's size must be controlled through some means, even through the initial declaration.
#interior-photo { overflow-x: scroll; }
Check my website, and see the Divisions left menu. When you have maximized your broswer there is no problem, but when you restore it to half of screen, the left menu overlaps to the right.
Here is the CSS code. Can someone help me?
It's because your "divisions" div is absolutely positioned.
You can remove "position: absolute" and increase the width of the "divisions" div to 300px.
Your left menu is absolutely positioned that's why it overlaps other content when window size is too narrow. But the solution for this problem is quite tricky and actually depends on what you want to achieve.
Percentage
One possible solutions would be to set width on "divisions" and "content" div in percentage. This way they'll never overlap. But it depends if you can afford to have dynamic width for your "content" div.
Repositioning
If your content must be fixed width... You'll first have to decide how would you like your content/menu to appear when window is too narrow (maybe even narrower than content width)... And work from there.
Body element width
Set minimum window content (as in <body>) width. Either by using:
transparent image at the beginning of your document <img src="t.gif" width="1250">
set body's minimum width css as min-width: 1250px; has to be 1250px wide, because content is centrally positioned, so it must have equal space on the left and on the right (right one being useless empty space just allowing non overlapping space on the left of content)
The last one is actually the simplest and works. It only makes it a bit wide for smaller screen sizes, but your content width (including menu on the left) already exceeds 1030px anyway...
A very straight-forward and simple
and quick-fix solution would be with CSS :
#content {style.css (line 17)
left:-270px;
margin:0 auto;
padding:30px 10px 0 550px;
position:relative;
width:780px;
}
I tried this in my Firebug and it worked fine. hope it'll suit you're needs :)
next time just use css floats:
put the side menu and the content div in a wrapper,
float:left for the menu, and give the wrapper a fixed width, and center align it.
you can also make the navigation menu go "out" from the left with negative left positioning it.