I'm trying to have the div expand to fit the content contained in a <section> tag for my HTML and CSS page. The thing is that it cuts off midway through the content and I can't get this to work.
So far I've experimented with setting overflow:auto but to not much success - the inner container scrolls but I'm looking to make the whole page scroll.
Can someone have a look and help me out? JSFiddle: http://jsfiddle.net/6xgT5/
Just get rid of height:100% on #mainContent and replace it with float:left. That should do the trick. Let me know if that resolved the issue.
For the footer, git rid of position absolute and replace it with float:left, width:100%:
footer {
float: left;
background-color: #CAD0C8;
border: #000 1px;
width: 100%;
height: 45px;
text-align: center;
padding-top: 5px;
}
Thats because you are fixing #footer and it makes to float outside a content layout. So you need just add to the section padding-bottom :45px /*footer height*/
Add overflow:auto; to #mainContent.
Related
I am new to HTML and CSS, I have a problem. When I add margin-top to <div id="parent-container"> the header will follow. Here is the jsfiddle: http://jsfiddle.net/DCtH7/1/
Need help still learning. Thank you in advance.
One thing, how to make the header on top of the div? When i scroll down the div covers the header.
It's not because the margin-top, It's because you've set position: fixed to your header so add top:0 to make your header positioned to the top of the page.
Fixed Header
It's not because the margin-top property of your #parent-container.
It's because you've set position: fixed to your header. Remove it and you should be fine.
Updated Fiddle
Updated CSS:-
parent-container {
width: 100px;
height: 600px;
background-color: black;
margin: 0 auto;
top: 100px;
position:relative;
}
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
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.
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 have spent hours looking for a solution and cannot find anything on this particular issue, so please forgive me if it has been answered.
I have a standard CSS page with a masthead, a navigation row, a left column for links, a right column for contents and a footer.
I have set everything to the center of the page at 1024px wide.
What I just cannot achieve is to have the 2 columns stay at the same height when one has longer content than the other.
Let me explain this - both columns have a 1px border that I would like to extend all the way down to the footer. The right column has much longer content so it reaches the footer very quickly but the left column doesn't so the border stops, where the links finish.
To fix this problem I have set the heights to 100% in the html, body, container and the two columns as follows:
html {
height: 100%;
}
body {
height: 100%;
}
#masthead {
width: 1024px;
height:100px;
margin-left:auto; margin-right:auto;
}
#top_nav {
width: 1024px;
height:100px;
margin-left:auto; margin-right:auto;
}
#container {
width: 1024px;
height:100%;
margin-left:auto; margin-right:auto;
}
#left_col {
width: 198px;
float: Left;
height: 100%;
border: 1px solid #FF0000;
}
#page_content {
margin-left: 200px;
width: 824px;
height: 100%;
border: 1px solid #000000;
}
#footer {
bottom: 0px;
clear: both;
width: 1024px;
height: 50px;
margin-left:auto; margin-right:auto;
border: 1px solid #000060;
}
This works BUT now the content of the right column (which is much longer) goes way past the footer? and no matter what I try I cannot fix this without affecting the left column's border i.e. I can use min-height: 100%; which fixes the overflow and footer problem, BUT this has the side effect of capping the border on the left column back to the Navigation link's height i.e. so the border no longer flows to the bottom of the left column and down to the footer (grrrhhh!)
Here is a link to the page itself which you can copy and paste into DW or EW etc. to see what's going on:
http://www.iifuture.org/downloads/testzzz.html
If anyone knows how to fix this paradox I'd love to know about it!
Thanks
Shaun
Actually scratch that : remove the height:100% on the container, left col and page content. That's it.
Edit(revised answer after discussions)
This article helps.
style="background: blue url(someimage.png) repeat-y left;"
Add the above style to container. This is a hack, the DIV doesn't grow but the background image covers it up to get the layout you want!
Please refer this question and answer selected to learn more.
Original answer
Please take a look at overflow property. I was able to get your example page working with the below style added to page_content DIV.
position:absolute;overflow:auto;
With this code the scrollbars appear if the content exceed the height set. If you do not want to get the scrollbars and are okay with not showing the data beyond the DIV height, just use hidden instead of auto. Likewise, to display the scrollbars at all times, you may use scroll.
The last option visible will make it *(mis)*behave the way it is behaving right now i.e. letting the data grow beyond the DIV height. Notice that the DIV is not growing, only the content is.