I have the following:
XHTML:
<div id="container">
// contents
</div>
CSS:
#container { margin: 0 auto; width: 940px; overflow: hidden; padding: 10px; border: 1px solid #CCCCCC; }
The div is centered on the page with margin: 0 auto and I use overflow: hidden to allow the DIV to automatically expand down to the height of its contents.
I have some content in the DIV which has a box-shadow on it. The problem is due to the overflow: hidden rule the shadow does not fully appear on the page. The only ways around this I have found:
Take out overflow: hidden - but then the container DIV doesn't expand down.
Use height / min-height on #container - however this wont work well with all pages on the site.
Use float: left - but then the DIV isn't centered on the page.
Anybody got any more suggestions for this?
You can use one of the many clearfix techniques. That will let you remove overflow:hidden and fix the cropped box-shadow.
Here's a recent article on the topic: http://css-tricks.com/snippets/css/clear-fix/
Pretty sure some margin on the div would solve it, but if you show some more code it's easier to check.
Related
I am trying to make a horizontal menu which consists of a parent div with overflow:hidden and a child with overflow:auto. This allows me to have a scrollable div with no scrollbar.
However, to prevent a break in the li elements, the child element has a white-space:nowrap attribute. This makes the scrollbar appear again.
I tried using a display:table as an alternative to the nowrap but that doesn't allow scrolling.
Any ideas on how to proceed?
Thanks
UPDATE:
Seeing as I have not been able to explain myself correctly, I have uploaded a small example of what I want on jsfiddle: LINK
I want a list of items next to each other which is wider than container and for the user to be able to scroll but without the scrollbar showing. If I have the white-space:nowrap attribute, the scrollbar is present but if I remove it, the elements will go under each other.
Thanks!
#wrapper {
width: 250px;
overflow: hidden;
outline: 1px solid blue;
}
#scroller {
width: 270px;
height: 100px;
overflow: auto;
}
<div id="wrapper">
<div id="scroller">
foo<br>bar<br>baz<br>foo<br>bar<br>baz<br>foo<br>bar<br>baz<br>
foo<br>bar<br>baz<br>foo<br>bar<br>baz<br>foo<br>bar<br>baz<br>
foo<br>bar<br>
Try This One For E.g
First off let me assure you I've searched and tried so many solutions to this seemingly simple layout without success.
For now I've had to resort to laying it out with display:table, but would very much prefer a non-script, pure CSS solution using divs.
What I need is a basic 2-column layout: A sidebar div hugging the top-left and a content wrapper div to the right of the sidebar.
The sidebar will contain 3-4 divs, the content wrapper 1 div.
The kicker is I need the background of the sidebar and content wrapper always to fill 100% height of the viewport - even if there's no content inside the content wrapper div.
If there's content inside the content wrapper div, the background of both the sidebar and content wrapper should expand vertically to fill the viewport.
The fiddle below does exactly this. The problem with this approach (using position:fixed on the sidebar) occurs once you start "zooming" on mobile devices. The content will then disappear behind the fixed div.
Any advice on how to best achieve this layout?
Fiddle: http://jsfiddle.net/mnorup/2Xvdn/1
I think I got something quite close to what you want: http://jsfiddle.net/2Xvdn/5/
What I changed:
added a wrapper having the id outside and added the following css to it: {
overflow: hidden;
min-height: 100%;
}
replaced the css for sidebar by {
background: yellow;
width: 230px;
float: left;
margin-bottom: -9999em;
padding-bottom: 9999em;
}
removed min-height for contentwrap and added the following css: { margin-bottom: -9999em;
padding-bottom: 9999em;
}
Here are some other approaches to have columns with equal heights: http://www.vanseodesign.com/css/equal-height-columns/ I used the here described Borders and Negative Margins, just that I used padding instead of borders.
Is this doable for you? FIDDLE
I just changed a width and floated.
CSS
#sidebar {
height: 100%;
background: yellow;
width: 230px;
border: 0px solid transparent;
float: left;
}
#contentwrap {
min-height: 100%;
background: blue;
float: left;
margin-left:10px;
OK, see if this is closer. FIDDLE
The container for the text is the container for everything, and as it expands, so will the bar on the left.
Smaller contents so you can see the background - FIDDLE
In the bookmark_matrix in this fiddle
http://jsfiddle.net/sjD24/14/
I'm trying to hide content outside of the 500 px width
by setting
overflow:hidden
I'm not getting the desired effect as it wraps to the next line instead.
MDN Reference
The two examples I've seen show overflow working with vertical content, I'm not sure if this implies it does not work with horizontal content.
Please note that I do not want it to wrap. Perhaps that would have been a better title.
You have no height set, so the div's height expands as needed. There's no overflow.
You could do something like this:
#bookmark_matrix{
border: 1px dotted #222222;
padding: 5px;
width: 500px;
overflow: hidden;
height: 1em;
}
hi i am haveing trouble with height.. please tell me friends how can i resolve this issue.
Please check here to check the website
this is the link of my website. and Rates page .. i am having trouble with height.
i wrappered all the content in
#wrapper {
background: url("images/wrapper_bg.png") repeat-y scroll left top transparent;
margin: 0 auto;
padding: 0 10px;
width: 960px;
}
but
#main {
height: 100% !important;
width: 960px;
}
is not responding for the internet height.
please help me
Try putting overflow:auto; in your #main
The main issue is the elements inside of #main are floated. So the height of the floated elements won't cause the height of #main to expand
OR
put clear:both; on the #footer
The problem is that because everything inside your #main div has the float property set. Basically, this makes main look like it has no elements, which causes the #footer div to rise up. I can think of two ways to fix this:
Add "overflow: hidden" to your #main style, or
Add "clear: both" to your #footer style
I am using the following bits of code to keep my menu items fixed while allowing for the scrolling of content because it seems to be the most stable method across all browsers.
body { overflow: hidden; }
div.content { height: 100%; overflow: auto; }
My problem is simple, and yet I can not seem to figure it out, the content inside the tag butts up against the scrollbar for the div area and it makes reading much more difficult. How can I get a margin between them (apart from floating a transparent image to the right to create space, there HAS to be a better way)?
div.content { height: 100%; overflow: auto; margin:0 15px }
I might have misunderstood you though, post some HTML if I have.