i have made the following example but it does not work.
<div class="wrapper">
<header></header>
<div class="content">
<div class="sub_content">
<article>
<section id="sub_description">some text<br/></section>
</article>
<div class="sub_right floatright"></div>
<div class="clearfix"></div>
</div>
</div>
<footer></footer>
</div>
http://jsfiddle.net/x2x3s7o5/1/
i dont want article to take fixed height. i want to take the full height of the parent container. but the scroll bar doesnt work.
can anyone suggest me any solution?
http://jsfiddle.net/x2x3s7o5/2/
try to remove overflow: hidden from class .content and add overflow:scroll
change article height to 100px.
check it and mess around with the size u want :-)
Related
Isn't the first time I want all content inside all sections are in a container with a max-width, but the only solution is duplicate html tags. Something like this:
<body>
<section class="one">
<div class="wrapper">
// content for one
</div>
</section>
<section class="two">
// There is a background here
<div class="wrapper">
// content for two
</div>
</section>
<section class="three">
<div class="wrapper">
// content for three
</div>
</section>
<section class="four">
// There is a background here
<div class="wrapper">
// content for four
</div>
</section>
</body>
Putting a div "wrapper" inside looks like the only solution to control every section with a max-width/centered and keeps the ability to put a full-width backgound in few section.
I don't like this solution, is a div duplicated for every section with same properties. If someday I change my mind and want remove it or I need to do it in every section or I need to remove css to that selector. Its look not semantical for me.
Any solution?
I would create a div like this
<div id="maindiv">
<div id="sitecontainer">
<!-- inner content -->
</div>
</div>
Then you can control max width from one place for all section. IF you don't want max width for a section, remove the site container div from within that section. You change your mind on the width? Change it in one place. You decide to go 100% width, change the width to 100% inside that div. Makes it easy to manage sitewide..
Your css
#sitecontainer { float: left; width: 1000px; margin: 0 auto; }
#maindiv { float: left; width: 100%; }
Then if you add another div,
<div id="secondarydiv">
<div id="sitecontainer">
// content still 1000px centered
</div>
</div>
I need to make a inner div horizontally scrolleable, but using the browser scrollbar and not that particular div's scrollbar.
One option would be making every other div's position as static and overflowing the wrapper div, but since I'm modiyfing a premade template, I would prefer to be able to do this without changing the layout. In that sense, a JavaScript/jQuery plugin would be nice, but totally not a must.
Here is the code:
<title>This is a test</title>
<body>
<header>
This is the header.
</header>
<div id="wrapper">
<div id="left-sidebar">
This is the left sidebar.
</div>
<div id="test">
<div id="content">
This is the main content.
<div id="flex">
<div id="rectangle"></div>
<div id="rectangle"></div>
<div id="rectangle"></div>
<div id="rectangle"></div>
<div id="rectangle"></div>
<div id="rectangle"></div>
<div id="rectangle"></div>
</div>
</div>
</div>
</div>
<footer>
This is the footer.
</footer>
</body>
Here is the jsFiddle: https://jsfiddle.net/k6e3sv6v/
Thanks bra
I think you cannot focus BROWSER scrollbar into some div it appears if the whole page is wider than 100% width.
But I think it can be done by putting all other elements around that div as fixed position which won't move over the screen even if the scroll was moved left-right...
I am facing problem. My page doesn't look like what i am expecting.
*{margin:0; padding:0;}
.width{width:980px;margin:0 auto;}
.header{width:100%;background-color:#ffffbb;}
.leftpanel{float:left;height:50px;}
.rightpanel{float:right;height:50px;}
.clear{clear:both;}
h2{font-size:32px;}
<!-- HEADER AREA -->
<div class="header">
<div class="width">
<div class="leftpanel">
<h2>This is first sentence</h2>
</div>
<div class="rightpanel">
<h2>This is second sentence</h2>
</div>
<div class="clear"></div>
</div>
</div>
On window minimize my header color is getting shrinks and not covering whole width of the content. How to fix it ? I tried to use max-width:980px; but that is collapsing the content when minimizing the browser. I want bottom scroll to cover the whole width without collapsing the content and background color to get fixed.
I see what you're doing wrong. Basically, your header only extends to a width of 100%, that is 100% of the viewport. When you shrink your screen past 980px, as denoted by your .width element some of your content goes out of the viewport thereby extending outside of the header. You can do many things to fix this, a really quick fix would be to add a float to the header and set its minimum width to 100%. e.g.
*{margin:0; padding:0;}
.width{width:980px;margin:0 auto;}
.header{min-width:100%;float:left;background-color:#ffffbb;}
.leftpanel{float:left;height:50px;}
.rightpanel{float:right;height:50px;}
.clear{clear:both;}
h2{font-size:32px;}
<!-- HEADER AREA -->
<div class="header">
<div class="width">
<div class="leftpanel">
<h2>This is first sentence</h2>
</div>
<div class="rightpanel">
<h2>This is second sentence</h2>
</div>
<div class="clear"></div>
</div>
</div>
This is because you are giving fixed width to the elements .
Use the following Css and your problem will be solved:
*{margin:0; padding:0;}
.width{width:100%;margin:0 auto;}
.header{width:100%;background-color:#ffffbb;}
.leftpanel{float:left;height:50%;}
.rightpanel{float:right;height:50%;}
.clear{clear:both;}
h2{font-size:32px;}
Also try reading why not to give fixed width and height, this would help you understand better
I got the white background (.big-content) to be 100% height by using position:absolute, but now it's making my footer float! How can I fix this? wolvesofys.weebly.com
Here's my CSS: http://wolvesofys.weebly.com/files/main_style.css?1374887463
Here's my HTML: view-source:http://wolvesofys.weebly.com/
I think the wrappers are the issues.
<div class="wrapper">
<div id="wrap">
<div class="big-content">
<div class="content">
<div class="container">
<p>Text here</p>
</div>
</div>
</div>
<div class="clear"></div>
</div>
</div>
</div>
And the footer stuff:
<footer>
<div id="wrap">
<div id="page_footer">
<ul>
<li></li>
<li>Terms and Conditions</li>
<li>/li>
<li>Contact</li>
<li></li>
<li>Help</li>
<li></li>
</ul>
<div id="copyright">Content © 2013 FeraLupus.com</div>
</div>
</div>
</footer>
By using height: 100%, all does it tell the class .big-content to fully expand itself to the height of the parent element that it is within. This does not take into consideration any margin or padding settings that you have (so it could go outside of the parent element or look obscure).
The way absolute positioning works is that it removes it from the "flow" of the page. Your footer isn't technically floating, you are disrupting the flow of it by making the previous element absolute. Without seeing the actual pages code though, it is difficult to tell you how to fix the problem.
Is not good to use absolute that way, so I delete it.
Instead, I removed the auto height from your .wrapper class. And added the fixed position to your footer (in this case, is an acceptable use of that)
Here the live demo: http://plnkr.co/edit/UYKfJrxbnqYlSiEaitNW?p=preview
You have a problem of width, but thats another issue.
The general html structure of my pages is
<div id="wrapper">
<div id="header">
</div>
<div id="content">
</div>
<div id="footer">
</div>
</div>
I have a 1000px layout with the content centering.
However, for a couple of the pages I have a banner in the content that should expand 100% to the sides of the browser (i.e., beyond the 1000px wrapper).
Should I delete the wrapper div for this page and apply width: 1000px; margin: 0 auto; separately? Or should I take the banner outside of the standard wrapper layout? What is a more standard way to do this?
Thank you.
Using style="overflow:show" for that content banners parent should allow it to show. Instead of width=100% you might need to use some javascript to get the screens width and make it that width.
I would take the banner outside of the wrapper.
I had same problem and done something like this:
.center
{
margin: auto;
width: 1000px;
}
<div id="wrapper">
<div id="header">
</div>
<div id="content">
<div class="center">
</div>
<div id="banner">
</div>
<div class="center">
</div>
</div>
<div id="footer">
</div>
</div>