Hi everyone my tutorial has a tree div for now. Header,container and footer. header is fixed. but if you check it in JSFiddle you see container div has a problem lags behind the header div i can not solv the problem. what can i do in my css code?
This is HTML code:
<div class="globalHeader">
<div class="globalheader-in"></div>
</div>
<div class="global_container">
<div class="container">
1 <br>2 <br>3 <br>4 <br>5 <br>
</div>
</div>
And CSS code:
.global_container {
clear:both;
width:981px;
height: auto;
margin-left:auto;
margin-right:auto;
border-right:1px solid #d8dbdf;
overflow:hidden;
background-color:#f8f8f8;
}
.container {
float:left;
width:981px;
height:100px;
background-color:red;
}
.globalHeader {
width:100%;
height:40px;
position:fixed;
background-color:#2a3542;
z-index:99999;
}
.globalheader-in {
width:981px;
height:40px;
margin-left:auto;
margin-right:auto;
border-right:1px solid #fff;
border-left:1px solid #fff;
}
Using a spacer
You can push the content of container down by adding a spacer element as the first child of the container.
.container:before {
content: ' ';
display: block;
height: 40px; /* equal to the height of the header */
}
WORKING DEMO.
Using top padding
You can also use padding-top for the container to achieve that:
.container {
width:981px;
height:100px;
/* other styles... */
padding-top: 40px;
}
WORKING DEMO.
However If you want to keep the height of the container as 100px, you should use box-sizing: border-box to calculate the height of the container including paddings and borders, as follows:
.container {
width:981px;
height:100px;
padding-top: 40px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
WORKING DEMO
I would do it like this:
http://jsfiddle.net/8eSAU/5/
.global_container{
clear:both;
position: relative;
top: 40px;
}
It was not working, because you simply hid the text beneath the fixed element.
Kolay gelsin :)
Why not add:
position:relative;
top:40px;
To .global_container {
Demo Fiddle
This assumes you wish the header to scroll with the content, in which case all you need to do per the demo is offset the top of the content by the height of the header, so it initially displays below it.
A simple padding-top will take care of that.
JSFiddle
.global_container{
clear:both;
width:981px;
height: auto;
margin-left:auto;
margin-right:auto;
border-right:1px solid #d8dbdf;
overflow:hidden;
background-color:#f8f8f8;
padding-top:40px; /* heigt of fixed header */
}
you can add padding-top to the .global_container or body
padding-top should be same as height of header.
Please find the link below for the Fiddle
Add the following to global_container class
position:absolute;
top:47px;
FIND FIDDLE HERE
Related
I have a div. Inside this div are 2 smaller divs. I want one of the smaller divs to have overflow:visible, and the other to have overflow:hidden. Can't figure out what selectors allow me to do this, I think I'm missing something super simple.
edit Sorry, let me rephrase that: I want the main div to have the style overflow:visible only applied to one of the child divs, while the main div also has the style overflow:hidden apply to the other.
Example:
http://jsfiddle.net/3fQBt/
<div id="body">
<div id="visible">This div should be visible.</div>
<div id="hidden">This div should be hidden.</div>
</div>
#body{
width:300px;
height:300px;
margin:20px;
position:relative;
float:left;
overflow:visible;
}
#visible{
width:100%;
height:100px;
margin-left:-20px; //this should overflow visibly
position:relative;
float:left;
}
#hidden{
width:100%;
height:100px;
margin-left:-20px; //this should be hidden
position:relative;
float:left;
}
something like this should get you going in the right direction.
<div id="body">
<div id="visible">This div should overflow.</div>
<div id="hidden-box">
<div id="hidden">This div shouldn't.</div>
</div>
</div>
#hidden-box {position:relative;overflow:hidden;height:100%;width:100%;}
Here's a couple of solutions:
HTML:
<div id="body">
<div id="visible">This div should overflow.</div>
<div id="hidden1">This div shouldn't.</div>
<div id="clip">
<div id="hidden2">This div shouldn't.</div>
</div>
</div>
CSS:
/* solution 1 uses text-indent to create the clipping and a red block to cover the excess background blue on the right */
#hidden1 {
width:100%;
height:100px;
background-color:#00f;
color:#fff;
text-indent: -20px;
position:relative;
float:left;
}
#hidden1:after {
content: "";
display: block;
position: absolute;
right: 0;
top: 0;
width: 20px;
height: 100%;
background-color: red;
}
/* solution 2 uses a second div with overflow: hidden to clip the text to get around the parent div's overflow: visible */
#clip {
overflow: hidden;
position:relative;
float:left;
width: 100%;
}
#hidden2{
width:100%;
height:100px;
background-color:#00f;
color:#fff;
margin-left:-20px;
position:relative;
float:left;
}
Fiddle here
Can't you reduce de width of the second div and remove the negative margin-left like this:
#hidden{
width: calc(100% - 20px);
height:100px;
position:relative;
float:left;
}
Demo
EDIT: Added calc() on CSS
You could do something like this, although it's pretty brittle, so not much use in the real world:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
*, *:before, *:after {-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;}
body {margin: 0;}
#body{
width:300px;
height:300px;
background-color:#f00;
margin:20px;
position:relative;
overflow:hidden;
border:solid 1px #000;
}
#visible{
width:300px;
height:100px;
background-color:#0f0;
position:fixed;
left: 0;
}
#hidden{
width:300px;
height:100px;
background-color:#00f;
color:#fff;
position:absolute;
top: 100px;
left: -20px;
}
</style>
</head>
<body>
<div id="body">
<div id="visible">This div should overflow.</div>
<div id="hidden">This div shouldn't.</div>
</div>
</body>
</html>
TRY this,
#hidden {
width: 100%;
height: 100px;
background-color: #00F;
color: #FFF;
/*margin-left: -20px; <--- remove this*/
position: relative;
float: left;
overflow: hidden !important;/*add this*/
}
Hello guys this has been bugging me for hours.
Im using the layout to get full height containers and sticky footers.
Unfortunately i only want a border in the content but it is not extending to the footer.
I can try to give the the wrap div the borders but i dont want the header to have borders.
The only thing i can think of is giving the header the border color of the background but i dont want to do this.
Is there another way you can do this?
http://jsfiddle.net/VNc33/14/
<body>
<div class="wrap">
<header>
<img src="http://placedog.com/400/50" />
</header>
<div class="content">i dont want the header tag to have a border
</div>
<footer>This is a footer.</footer>
</div>
</body>
Image
you can use an inset unblur box shadow on .wrap, so it should not bother much your layout :http://jsfiddle.net/VNc33/5/
.wrap {
margin:0 auto;
position:relative;
width:400px;
min-height:100%;
background:lightblue;
box-shadow:inset 0 0 0 1px;/* here fake an inside border of 1 pixel with text color if none declared */
}
header { background:lightblue;/* background hides inset box-shadow from parent */} http://jsfiddle.net/VNc33/8/ and you can remove borders from .content except the top one : http://jsfiddle.net/VNc33/9/ .
With another CSS approach to build your fullHeight template , you can have header and footer of variable height, using the display properties used by tags . (<footer> inside .wrap)
this method is avalaible in IE from version 8 , lower version wwill ignore the display:table/table-row/table-cell propertie and wil use the default display.http://jsfiddle.net/VNc33/11/
body, html {
height:100%;
margin:0;
padding:0;
}
header {
height:50px;
}
.wrap {
margin:0 auto;
width:400px;
display:table;
height:100%;
background:lightblue;
}
.content {
color:white;
border:1px solid black;
}
footer {
height:50px;
background:darkred;
color:white;
}
header img {
vertical-align:top;/* or bottom or display:block */
}
header, footer {
display:table-row;
}
.content {
display:table-cell;
height:100%;
border:solid 1px solid;/* just put the border here */
}
easy way to apply the border to .content and not mind about how much content is hold
fiddle
<body>
<div class="wrap">
<header>
<img src="http://placedog.com/400/50" />
</header>
<div class="content">i dont want the header tag to have a border</div>
<footer>This is a footer.</footer>
</div>
</body>
--
body, html {
height:100%;
margin:0;
padding:0;
}
.wrap {
margin:0 auto;
position:relative;
width:400px;
height:100%;
background:lightblue;
}
header {
height:8%; /* height can be anything but header + content + footer heights must be 100% or the page will scroll */
border:0;
}
.content {
height:84%;
color:white;
border:1px solid black;
-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
/* keeps height at 84% instead of 84% + 2px for border */
}
footer {
height:8%;
background:darkred;
color:white;
}
Change .wrap min-height to just height and add height:100% to .content
My pen: http://codepen.io/helloworld/pen/vzuLC
How can I tell the orange div to line-break its text/content so that the yellow div does not linebreak?
div green and div yellow must have a fixed width. The div between them should have width:auto that means the div grows with the content and breaks with the content.
I do only IE9+ and latest Chrome/FF
Set its width with CSS calc().
Demo
#address{
width: calc(100% - 100px);
}
Browser support for calc()
#Itay 's answer is great, but I would recommend you use absolute position for compatibility reason. For front-end developers, compatibility is everything.
.wrapper{
position: relative;
border-top:white solid 1px;
border-bottom:#ddd solid 1px;
}
#alarmNumber{
position: absolute;
left:0;
width:50px;
background:lightgreen;
}
#address{
float:left;
margin: 0 50px;
}
#expander{
position:absolute;
right:0;
background:yellow;
text-align:center;
width:50px;
height:100%;
}
DEMO
You could do this with position:absolute and box-sizing
#alarmNumber{
float:left;
width:50px;
background:lightgreen;
position:relative; /* add this */
z-index:1; /* add this so that it appears on top of address */
}
#address{
width:100%;
padding: 0 50px; /* add this */
position:absolute; /* add this */
-moz-box-sizing: border-box;
box-sizing: border-box; /* add this */
}
UPDATED CODEPEN
I have the following problem:
I'd like to create a html page where a #sidebar spans a constant 27px and a #content spans the remaining part of the screen. The #content is divided into two areas splitting it at 40% - 60%.
<html>
<body>
<div id="sidebar">
</div>
<div id="content">
<div id="forty-percent">
</div>
<div id="sixty-percent">
</div>
</div>
</body>
</html>
I have tried to make the following css:
#sidebar{
width:27px;
}
#content{
position:absolute;
padding-left:27px;
width:100%;
}
But then I cannot divide the content into 40%-60%, because percentages are calculated from the width of the #content and not from its area inside.
What am I doing wrong? Can you please help?
UPDATE:
The demo of the NOT working version:
http://jsbin.com/iseqon/1/edit
Ideally the dashed boxes should be side-by-side, inside the blue box.
This may suit more your needs. If you want to have a better control of your #sidebar & #content vertical alignment, you must use inline-block to have a CSS only solution.
You can view it live here: http://codepen.io/jpsirois/pen/dvbmEy
* {
/* This prevent padding to be added on defined width */
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body {
font-size: 0; /* Need to be set to 0 to properly use inline-block here */
color: white; /* For a better preview purpose only */
}
#sidebar,
#content {
display: inline-block; /* Allow vertical-align control (float didn’t) */
font-size: 16px; /* Reset font-size to normal */
vertical-align: middle; /* Demo of vertical-alignement */
}
#sidebar {
width: 27px;
background: darkred;
height: 50px; /* For a better preview purpose only */
margin-right: -27px; /* This allow #content to be inlined aside */
}
#content {
font-size: 0; /* Need to be set to 0 to properly use inline-block here */
width: 100%;
padding-left: 27px;
}
#forty-percent,
#sixty-percent {
height: 100px;/* For a better preview purpose only */
display: inline-block;
font-size: 16px; /* Reset font-size to normal */
}
#forty-percent {
width: 40%;
background: darkgreen;
}
#sixty-percent {
width: 60%;
background: darkblue;
}
You need this to float the #sidebar and give an equal margin-left to the #content, and also float the two inner boxes so they can sit side by side..
#sidebar {
width:27px;
float:left;
}
#content {
margin-left:27px;
overflow:auto;
}
#forty-percent {
width:40%;
float:left;
}
#sixty-percent {
width:60%;
float:left;
}
and also to not use the # char in the actual id
Demo at http://jsfiddle.net/gaby/8a7CN/
(your fixed jsbin demo at http://jsbin.com/iseqon/4/edit you need to keep in mind that borders add to the width so it cannot work with percentages very well)
how about having a parent div that would be relative and then having the div inside float right or left with absolute position within container. when the parent container is pos relative and the child is pos absolute, the children with position with respect to their container. In other words, something like that (untested but should give you the right idea)
#wrapper {
position:relative;
width:100%;
margin:50px;
}
#leftCol {
width:60%;
background-color:yellow;
}
#rightCol {
width:40%;
position:absolute;
right:0px;
top:0px;
height:100px;
background-color:red;
}
</style>
<div id='wrapper'>
<div='leftCol'>
</div>
<div id='rightCol'>
</div>
</div>
I am using your HTML only change the CSS.
My CSS is
#sidebar
{
width:27px;
min-width:27px;
float:left;
}
#content
{
float:right;
width:100%-28px;
min-width:100%-28px;
}
#forty-percent
{
width:40%;
float:left;
}
#sixty-percent
{
width:60%;
float:right;
}
Hope this will help you.Thanks.
I'm creating a sidebar with this CSS code:
.sidebar {
position: absolute;
z-index: 100;
top: 0;
left: 0;
width: 30%;
height: 100%;
border-right: 1px solid #333;
}
But the sidebar width doesn't scale when I change the browser width. How can I make the sidebar fluid?
Thanks.
Look at the height in body in CSS part.
Here is a working example for you:
Your HTML:
<div id="content">
<p>This design uses a defined body height of 100% which allows setting the contained left and
right divs at 100% height.</p>
</div>
<div id="sidebar">
<p>This design uses a defined body height which of 100% allows setting the contained left and
right divs at 100% height.</p>
</div>
Your CSS:
body {
margin:0;
padding:0;
width:100%; /* this is the key! */
}
#sidebar {
position:absolute;
right:0;
top:0;
padding:0;
width:30%;
height:100%; /* works only if parent container is assigned a height value */
color:#333;
background:#eaeaea;
border:1px solid #333;
}
#content { margin-right: 200px; }
Its kind of an odd issue, but it seems its challenging to get the background color to stretch to the bottom of both columns, when using fluid layout.
I included the workaround along with a simple 2 column fluid layout.
Try this- jsFiddle
html, body {
margin:0;
padding:0;
background:silver;
/* workaround to get the columns to look even,
change color depending on which column is longer */
}
#sidebar {
position:absolute;
left:0px;
top:0px;
padding:0;
width:30%;
background:silver;
word-wrap:break-word;
}
#content {
position:absolute;
right:0px;
width:70%;
word-wrap:break-word;
background:gray;
}