My css is below. What I want is the header shall be fixed at top of the page and having width equal to the width of container irrespective to the changing width of browser. However, I always get the width of header expands over the width of Container. Please instruct me how to fix it?
html {
font-size: 16px;
}
.container {
width: 80%;
margin: 0 auto;
}
header {
width: 100%;
display: grid;
grid-template-columms: auto auto;
grid-template-rows: 170px 60px;
position: fixed;
top: 0px;
margin: 0 auto;
}
<div class="container">
<header>
<div class="cart">
</div>
</header>
Set the width of the header to 80%;
Works automatically..
* {
margin:0;
padding:0;
}
.container {
width: 80%;
margin: auto;
border: 1px solid red;
height: 150vh;
}
header {
background: green;
position: fixed;
width: 80%;
top: 0;
height: 50px;
}
<div class="container">
<header>
<div class="cart">
</div>
</header>
Codepen Demo
How can I tell a div to use the entire area marked with the red arrows no matter the size of the browser and no matter the div contents?
I tried: <div style='height:100%;width:'100%'>...</div> but it only takes the horizontal area, not the vertical. Is there a way to do this?
Check out this Fiddle
https://jsfiddle.net/o7u9hxou/
html
<body>
<div id="sidebar"></div>
<div id="wrapper">
<div id="topbar"></div>
<div id="else"></div>
</div>
</body>
css
body {
box-sizing: border-box;
height: 100vh;
margin: 0px;
padding: 0px;
}
#else {
background-color: green;
height: 90vh;
}
#sidebar {
background-color: pink;
display: inline-block;
float: left;
height: 100%;
min-width: 50px;
width: 10%;
}
#topbar {
background-color: yellow;
height: 10vh;
min-height: 20px;
}
#wrapper {
display: inline-block;
float: right;
height: 100%;
width: 90%;
}
Yeah I know the topic was explained probably million times, but have a look at this. I cant make #content and/or .content-bg go all the way down and show the pattern down to the bottom:
html, body {
height: 100%;
}
body {
min-width: 500px;
margin: 0px;
padding: 0px;
}
#wrapper {
position: relative;
width: 100%;
min-height: 100%;
height: auto !important;
margin: 0px auto -97px;
}
#header {
width: 100%;
height: 100px;
position: relative;
background-color: #ccc;
}
#content {
min-height: 100%;
}
.content-bg {
background: url("http://www.squidfingers.com/_patterns/files/pattern_136.gif") repeat scroll 0% 0% #F9EDE4;
overflow: hidden;
}
#footer {
background-color: #ccc;
height: 97px;
}
<body>
<div id="wrapper">
<div id="header">
header content
</div>
<div id="content">
<div class="content-bg">
content
</div>
</div>
</div>
<div id="footer">
footer content
</div>
</body>
Any ideas?
This question already has answers here:
css background color with floating elements
(5 answers)
Closed 6 years ago.
I have an issue with my floated child divs not growing with my parent div. Is there a way to fix this? I need the wrapper to be 100% of the content in either div. Here is the html;
<body>
<div id="wrapper">
<div id="leftpane">
<div id="lefthead">
<div id="leftheadfiller">
</div>
<div id="leftheadlogo">
</div>
<div id="leftheaddivider">
</div>
</div>
<div id="leftcontent">
</div>
</div>
<div id="rightpane">
<div id="righthead">
<div id="rightheadfiller">
</div>
<div id="rightheadlogo">
</div>
<div id="rightheaddivider">
</div>
</div>
<div id="navigation">
Properties Careers About Blog Advertise Contact
</div>
<div id="rightcontent">
</div>
</div>
<div id="close">
</div>
</div>
</body>
And here is the css;
html,body {
background-image:url('images/background.gif');
background-repeat: repeat-y;
background-position: center;
background-attachment: fixed;
height: 100%;
width: 100%;
margin: 0px;
}
#wrapper {
background-color: aqua;
height: 100%;
width: 866px;
margin-left: auto;
margin-right: auto;
}
#leftpane {
background-image: url('images/darkbackground.gif');
width: 326px;
height: 100%;
float: left;
}
#lefthead {
height: 132px;
width: 100%;
}
#leftheadfiller {
height: 75px;
width: 100%;
}
#leftheadlogo {
background-image: url('images/index_07.gif');
width: 71px;
height: 56px;
float: right;
}
#leftheaddivider {
height: 1px;
width: 100%;
background-image: url('images/lightbackground.gif');
float: right;
}
#lefttcontent {
height: 100%;
background-color: fuchsia;
}
#rightpane {
background-image: url('images/lightbackground.gif');
width: 540px;
height: 100%;
float: right;
}
#righthead {
height: 132px;
width: 100%;
}
#rightheadfiller {
height: 75px;
width: 100%;
}
#rightheadlogo {
background-image:url('images/index_09.gif');
width: 109px;
height: 56px;
float: right;
}
#rightheaddivider {
height: 1px;
width: 100%;
background-image: url('images/darkbackground.gif');
float: right;
}
#navigation {
margin-top: 2px;
font-family: Arial, Helvetica, sans-serif;
color: #A3A3A3;
font-size: 14px;
word-spacing: 44px;
text-align: center;
width: 100%;
height: 18px;
}
#rightcontent {
padding-left: 6px;
background-color: fuchsia;
}
#close {
clear: both;
}
Is there a way to fix this? I have this set up on a temporary folder on my local server at:
http://68.113.27.229/test
The two divs that I need to force the wrapper to grow are Leftcontent and Rightcontent.
Thanks!
Add overflow: hidden to the parent div element.
If you don't want the overflowing content to be hidden, then try this:
Insert this as the last div inside the wrapper div.
<div style="clear: both"></div>
I have css code to do layout. i have basic header panel, footer, left panel, and center panel. I want to have left panel and center panel automatically stretch to bottom(blue and gray part all the way to black footer). is there any way to do that?
following are my codes.
thank you,
body {
text-align: center;
}
.wrapper {
position: relative;
width: 960px;
font-size: 0.9em;
margin: 0 auto -20px;
text-align: left;
}
.header {
height: 125px;
background-color:purple;
}
.footer {
position: relative;
width: 960px;
margin: 0 auto;
background-color:black;
}
.footer a {
color: #fff;
text-decoration: underline;
border: 0;
}
.footer p {
position: absolute;
left: 0;
bottom: 4px;
width: 960px;
padding: 0;
color: #fff;
font: 0.8em arial,sans-serif;
text-align: center;
}
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -20px; /* the bottom margin is the negative value of the footer's height */
background-color:yellow;
}
.footer, .push {
height: 20px; /* .push must be the same height as .footer */
}
.leftPanel{
width:200px;
background-color:blue;
float:left;
height: 100%;
}
.centerPanel{
width:760px;
background-color:gray;
float:left;
height: 100%;
}
dl,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,body,html,div,p,blockquote,fieldset,legend,input,select,textarea
{ margin:0; padding:0 }
<div class="wrapper">
<div class="header">
<h1>header</h1>
</div>
<div class="leftPanel">
leftPanel
</div>
<div class="centerPanel">
center Panel
</div>
<div class="push"></div>
</div>
<div class="footer">
<p>footer</p>
</div>
</body>
This is a very work-aroundish solution, but here it goes: http://jsfiddle.net/Us5Cn/
The only way to get elements to stretch to a percentage portion of the height of the view port is to anchor them to the bottom.
See here for specifics.