HTML:
<div id="wrap">
<div id="header">
<div class="logo"></div>
<div class="category"></div>
</div>
</div>
CSS:
#wrap {
width:960px;
margin:0 auto;
position:relative; }
#header_wrap {
position:fixed;
top:0;
left:0;
width:100%;
min-width:960px;
height:105px;
background:rgba(256, 256, 256, 0.6); z-index:999; }
#header {
width:860px;
position:relative;
height:90px;
padding:15px 40px 0 40px;
margin:0 auto; }
.logo {
float:left;
margin-top:-35px; }
.category { float:right; margin-top:-9px; }
I made a fixed header menu on top of page.
But if browser window's width is smaller than wrap width (especially, when zooming on safari in iphone/ipad.), I can't see the right side(category) of header(fixed).
Help!
Do not specify the width in 'px' give it in the form of %, as you maximize or minimize your browser then either the scrollbar will appear and cut off your div
Related
I want to make a webpage with <div> and 100% height. I keep having problems with the height. I now have a height of 100% + 100px;
I create a header div which is 100px height. That is the only static height I use. Below that div I made another div which should fill the page. But when I set this to 100% it will add 100% to the 100px. When I set this to auto it will be only +- 150px height. This is the HTML
<!-- header -->
<div id="header">
<div id="logo"></div>
<div id="menuTop">menutop</div>
</div>
<!-- center -->
<div id="linkerbalk">
<div id="login">login naam</div>
<div id="menuLinks">Menu<br />Menu<br />Menu<br />Menu<br />Menu<br /></div>
</div>
<!-- footer -->
and the CSS i use is this:
html,body {
height:100%
}
body {
position:relative;
margin:0;
}
#header {
width:auto;
height:100px;
background-color:#FC3;
overflow:hidden;
}
#logo {
background:url(../img/logo.png);
background-position:center;
background-repeat:no-repeat;
background-color:#27c9cb;
height:100px;
width:250px;
float:left;
overflow:hidden;
}
#menuTop {
overflow:scroll;
background-color:#2d2e33;
height:100px;
overflow:hidden;
width:auto;
}
#linkerbalk {
background-color:#2d2e33;
height:100%;
width:250px;
float:left;
overflow:auto;
}
#login {
background-color:#2faaaf;
height:35px;
width:auto;
overflow:hidden;
}
#menuLinks {
height:auto;
width:auto;
overflow: hidden;
}
Following is one of the ways to achieve this:
I have wrapped your HTML with a container div and given it 100% - height of header i.e. 100px.
.container{
height:calc(100% - 100px)
}
Working fiddle here.
You need a wrapper.
<body>
<div id="wrapper">
<div class='top'>
</div>
<div class='mid'>
</div>
<div class='bot'>
</div>
</div>
</body>
* {
margin: 0;
padding: 0;
}
body,
#wrapper {
height: 100%;
}
.top {
height: 20%;
}
.mid {
height: 70%;
}
.bot {
height: 10%;
}
How can I let the green div be width: 100% with the other two divs on the same line with fixed width.
My idea is to let the two side div's have fixed width and the central div to be width: 100% (taking up the remainder space).
Is it possible to implement this situation?
CSS:
.boxMenu {
width:200px;
height:40px;
background-color:#000;
float:left;
}
.boxConteudoMaster {
height:40px;
background-color:#4cff00;
float:left;
}
.boxNotificacao {
width:200px;
height:40px;
background-color:#000;
float:left;
}
HTML:
<div class="boxMenu"></div>
<div class="boxConteudoMaster">asd</div>
<div class="boxNotificacao"></div>
JSFIDDLE HERE
I think your after something like this:
HTML:
<div class="boxMenu"></div>
<div class="boxNotificacao"></div>
<div class="boxConteudoMaster">Testing...</div>
CSS:
.boxMenu {
width:200px;
height:40px;
background-color:#000;
float:left;
}
.boxConteudoMaster {
height:40px;
background-color:#4cff00;
width: 100%;
}
.boxNotificacao {
width:200px;
height:40px;
background-color:#000;
float:right;
}
So we can float the 2 divs that we want fixed (float:left and float: right) and then after put are middle div to width: 100%.
DEMO HERE
I have the following issue with the next code posted in JSFiddle: http://jsfiddle.net/b9XVV/1/
HTML
<div class="content">
<div class="header">THGE HEADER OF THE PAGE</div>
<div class="thebody">
HERE GOES THE CONTENT OF THE PAGE......
</div>
<div class="footer">
<div class="footerContent">
<div class="footer1">Footer section</div>
<div class="footer2"></div>
</div>
</div>
</div>
CSS
.header {
width:100%;
height:50px;
background-color:#FFFF58;
}
.thebody {
width:500px;
height:400px;
margin:0 auto;
background-color:#DDD;
}
.footer {
width:500px;
height:50px;
background-color:#696969;
margin:0 auto;
}
.footerContent {
width:500px;
height:50px;
}
.footer1 {
width:400px;
height:50px;
float:left;
}
.footer2 {
width:100px;
height:50px;
float:left;
background-color:#FFddFF;
position:fixed;
right:0;
}
The question is that the pink Div should always stay on the footer and fixed on the right, but if window width is less than body width plus pink Div width, the pink Div should be kept on the left of the main footer (500px width)
Another issue is that scrolling the content, the pink div should always stay at the same level of the footer.
CSS:
.footer2 {
width:100px;
height:50px;
background-color:#FFddFF;
}
#media all and (max-width: 649px){
.footer2 {
position: inline;
float: right
}
}
#media all and (min-width: 650px){
.footer2 {
position:fixed;
right:0;
bottom: 0;
}
}
Demo: http://jsfiddle.net/b9XVV/2/
Watch the compatibility of the media queries: http://caniuse.com/#feat=css-mediaqueries Your main problem (if applicable) is IE8.
I´m trying to set a background color on a div that is stretched (using negative margins) to the full width of its outermost parent div.
Here´s a simplified example: http://jsfiddle.net/U5dnd/
The white div .featured-wrapper covers the full width of the black div .site, but its background color doesn´t. I suppose the margins are transparent.
Is there a way to make the whole .featured-wrapper div white, including its (negative) margins? (Or is there another way to accomplish this?)
Thanks!
.featured-wrapper {
background-color: white;
height:50px;
margin: 20px 0px 0 0px;
position:absolute;
width:100%;
z-index:100;
left:0;
}
Check this
JS Fiddle
CSS:
.site {
background-color:black;
padding: 0 40px;
height:300px;
width:320px;
}
.site-content {
width:100%;
overflow:hidden;
}
.wrapper {
overflow:hidden;
background-color:red;
height:100%;
}
.featured-wrapper {
background-color: white;
height:50px;
margin: 20px 0 0 -40px;
position: absolute;
width: 399px;
}
HTML:
<div id="page" class="site">
<div id="main" class="wrapper">
<div id="primary" class="site-content">
<div class="featured-wrapper">
<p>This is the featured wrapper</p>
</div>
</div>
</div>
</div>
I was wondering if there was a way to have an element stretch itself with the remaining window space it has when a fixed width has taken up a certain amount of the window.
For example
<div id ="first">
This div will ALWAYS be fixed at 20px height
</div>
<div id="second">
This div will take up 100% of the remaining space between the top div (first div that is 20px high ) and the bottom of the window.
</div>
Thank You
Here's an example using fixed positioning:
html, body {
margin:0;
padding:0;
height:100%;
}
#first {
height:20px;
background:yellow;
position:fixed;
top:0;
left:0;
right:0;
z-index:1;
}
#second {
padding-top:20px;
height:100%;
background:pink;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
-ms-box-sizing:border-box;
-o-box-sizing:border-box;
box-sizing:border-box;
overflow:auto;
}
And one using relative positioning:
html, body {
margin:0;
padding:0;
height:100%;
}
#first {
height:20px;
background:yellow;
position:relative;
z-index:1;
}
#second {
margin-top:-20px;
padding-top:20px;
height:100%;
background:pink;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
-ms-box-sizing:border-box;
-o-box-sizing:border-box;
box-sizing:border-box;
overflow:auto;
}
Both are assuming the following HTML:
<div id ="first">
This div will ALWAYS be fixed at 20px height
</div>
<div id="second">
This div will take up 100% of the remaining space between the top div (first div that is 20px high ) and the bottom of the window.
</div>
If you borrow the sticky footer idea from here, and you adapt it to get a fixed header, it would look like this (fiddle).
the html:
<div id ="first">
This div will ALWAYS be fixed at 20px height
</div>
<div id="second">
<div id="push"></div>
This div will take up 100% of the remaining space between the top div (first div that is 20px high ) and the bottom of the window.
</div>
the css:
#first {
height: 20px;
}
#push {
height: 20px;
background: #fcc;
}
html, body {
height: 100%;
}
#second {
min-height: 100%;
height: auto !important;
height: 100%;
margin: -20px 0;
background: #cfc;
}
Is this what you want?
http://jsfiddle.net/xvnCd/
In your first sentence you say "fixed width" but in the code you say height, so I'm not sure if this is what you're looking for.
Note that this version will lose you 20px at the bottom of the viewport, so it may or may not work for you depending on how you need this to be used.