I have one content div with 960px of width and margin 0 auto (centralized), i want put one div occupying all the space of the left margin, how can i do that?
demo jsBin
#container{
position:relative;
width:300px;/*change this*/
margin:0 auto;
height:200px;
background:#cf5;
padding-left:50%;
margin-left:-150px; /*half the width*/
}
#centered{
width:300px;
height:100%;
position:absolute;
right:0px;
background:#eea;
}
HTML:
<div id="container">
<div id="centered">centered</div>
</div>
HERE: http://jsbin.com/oluwos/3/edit is another way to do it.
Use display: table, like this:
http://jsfiddle.net/yVFzh/
<div class="wrapper">
<div class="left-column"> </div>
<div class="centre"></div>
<div class="right-column"> </div>
</div>
html,
body{
width:100%;
}
.wrapper{
display:table;
width:100%;
}
.wrapper > div{
display: table-cell;
background: blue;
height:400px;
}
.wrapper .centre{
width: 960px;
background: yellow;
}
Related
I am working on responsive design. I have div (WebPage_NavigationWrapper) and inside I have floating-left divs (function_block). Now I want to scroll bar in case floating divs cannot adjust in single line; meaning main div height remain same. Due to responsive design I am not using PX so I believe I am not providing height of div, unless I am wrong!
<div id="WebPage_NavigationWrapper" class="TitleHeaderBar_Style_L2">
<div class="function_block">
New-Award
</div>
<div class="function_block">
New-Award
</div>
<div class="function_block">
New-Award
</div>
<div class="function_block">
New-Award
</div>
</div>
</div>
CSS
#WebPage_NavigationWrapper{
display: table;
table-layout: fixed;
width:100%;
padding:10px;
overflow-x: scroll;
}
.function_block{
float:left;
padding:2px;
width:120px;
height:60px;
}
.function_block:hover{
background-color:#CDE5F2;
}
.CreateNewEntry_Icon{
margin-left:10px;
width:85px;
line-height:5;
display:inline-block;
background:url("../ImagesAndIcons/Icons/Add_New.png") no-repeat top center;
}
i think this will help you,
replace your code with following
#WebPage_NavigationWrapper{
width:400px;
height: 100px;
padding:10px;
overflow-x: scroll;
overflow-y: hidden;
border: 1px solid black;
}
.function_block{
display: table-cell;
padding:2px;
width:120px;
height:60px;
}
i have some div with height:100%, that have within this 3 divs: header, main, footer.
( here you can see an exemple: http://i61.tinypic.com/28mjpya.jpg )
in the 'main' div, i have a scroll, and i need this to be with height:100%
but when i do height:100% to the 'main' div, i cant see the 'footer' div.
and if i will do the 'footer' div with position:absulute; bottom:0px; it will hide my scroll bar of the 'main' div.
how can i solve this problem?
this is my source: http://jsfiddle.net/8YEJY/
<div style='position:fixed; left:0px; width:200px; height:100%;'>
<div id='hearer' style='width:100%; height:40px; background-color:lime;'>
aaa
</div>
<div id='main' style='width:100%; height:100%; overflow:scroll; background-color:green;'>
bbb
</div>
<div id='footer' style='width:100%; height:30px; background-color:pink;'>
ccc
</div>
</div>
Instead of making the content div scroll you could place your header and footer fixed an let the body scroll:
HTML:
<div id="header">header</div>
<div id="content">content</div>
<div id="footer">footer</div>
CSS:
html, body {
margin: 0;
padding: 0;
height: 100%; /* needs to be set */
}
#header, #footer {
width: 100%;
height: 100px; /* needs to be a fixed width! */
position: fixed;
top 0;
background: lightgreen;
}
#footer {
bottom: 0;
}
#content {
width: 100%;
min-height: 100%;
padding-top: 100px;
padding-bottom: 100px;
box-sizing: border-box; /* include the padding in the height */
-moz-box-sizing: border-box;
background: lightblue;
}
And a demo.
[EDIT based on your comment]
Change #content to:
#content {
width: 100%;
position: fixed;
top: 100px;
bottom: 100px;
overflow: auto;
background: lightblue;
}
Check the updated demo.
Note: instead of fixed positioning, you could also place #header, #content and #footer absolute, check this link. Result is the same though.
You can use position:absolute; on the #main and #footer like this :
FIDDLE
What I did to your code :
removed the inline styles and put them in a sperate stylesheet. This makes the code cleaner and inline styles are not recommended.
removed position:fixed; on the first container, it isn't needed for your layout.
removed unecessary css properties
changed the tags to HTML 5 tags
set html,body{height:100%;margin:0;} so the #wrap container can expand to the height of the window with height:100%; and position:relative;.
HTML :
<div id="wrap">
<header>aaa</header>
<main>bbb</main>
<footer>ccc</footer>
</div>
CSS :
html,body{
height:100%;
margin:0;
}
#wrap {
width:200px;
height:100%;
position:relative;
}
#header {
height:40px;
background-color:lime;
}
#main {
position:absolute;
width:100%;
top:40px;
bottom:30px;
overflow:scroll;
background-color:green;
}
#footer {
position:absolute;
width:100%;
bottom:0;
height:30px;
background-color:pink;
}
just add position:absolute and some bottom margin,I have added as bottom:0%;
This one works fine
<div style='position:fixed; left:0px; width:200px; height:100%;'>
<div id='hearer' style='width:100%; height:40px; background-color:lime;'>
aaa
</div>
<div id='main' style='width:100%; height:100%; overflow:scroll; background-color:green;'>
bbb
</div>
<div id='footer' style='width:100%; height:30px; background-color:pink;position:absolute;bottom:1%;'>
ccc
</div>
</div>
I'm working on a small PHP script, I made 2 divs and I used the float to show the two divs in the same line. But I still have a problem with background because the two divs do not have the same height.
This is the css code:
.wrapper{
width:200px;
}
.content{
width:200px;
}
.right{
float:right;
width:100px;
background:yellow;
}
.left{
float:right;
width:100px;
background:red;
}
.clear{
clear:both;
}
And this is the html code:
<div class="wrapper">
<div class="content">
<div class="right">
sdiousoiudosud sdiousoiudosud sdiousoiudosud sdiousoiudosud
</div>
<div class="left">
iuoiu
</div>
<div class="clear">
</div>
</div>
</div>
You should use display: table-cell:
.left, .right{
display: table-cell;
width: 100px;
}
.right{
background:yellow;
}
.left{
background:red;
}
Demo
If you want you can also use display: table-row and display:table, and set all widths. But it isn't necessary. Demo
The "good way" is using display: table-cell, as I explained in my other answer.
But if you want to support old browsers like IE7, you can use the following trick:
.content{
overflow: hidden;
}
.left, .right{
float: left;
width: 100px;
padding-bottom: 10000px;
margin-bottom: -10000px;
}
.right{
background:yellow;
}
.left{
background:red;
}
Where 10000px can be any value greater than the height of the highest element.
Demo
I have a wrapper containing 3 boxes (green: 300px, blue: 200px and yellow: 100px). The container can have a width of either 500px or 300px.
What I want is that, in the case the wrapper's width is 500px, the green and blue boxes get aligned, and the yellow gets hidden (Case A). In the other case (B), if the wrapper's width is 300px, I want to have the green box in the top, and the other 2 boxes aligned together in the bottom.
Is there a way to do this?
All the heights are equal (e.g. 100px)
UPDATE: I cannot control in advance the width of the wrapper. So I need a solution that works for both cases, not 2 solutions (each for 1 case).
<!doctype html>
<html>
<head>
<title>Demo</title>
<style>
#caseA {width: 500px; float: left;}
#caseB {width: 300px; float: left; clear: both; margin-top: 100px;}
#caseA > div, #caseB > div {height:100px; position: relative;}
.boxGreen {background-color:green; width: 300px; float: left; z-index: 3;}
.boxBlue {background-color:blue; width: 200px; float: right; z-index: 2;}
.boxYellow {background-color:yellow; width: 100px; float: right; margin-left:-100px; z-index: 1;}
</style>
</head>
<body>
<div id="caseA">
<div class="boxGreen"></div>
<div class="boxBlue"></div>
<div class="boxYellow"></div>
</div>
<div id="caseB">
<div class="boxGreen"></div>
<div class="boxBlue"></div>
<div class="boxYellow"></div>
</div>
</body>
</html>
How about this:
<style>
#wrapper{
overflow:hidden;
}
.wide{
width:500px;
height:100px;
}
.narrow{
width:300px;
height:200px;
}
#green{
width:300px;
height:100px;
background-color:Green;
float:left;
}
#blue{
width:200px;
height:100px;
background-color:Blue;
float:right;
}
#yellow{
width:100px;
height:100px;
background-color:Yellow;
float:left;
}
</style>
<div id="wrapper" class="wide">
<div id="green"> </div>
<div id="blue"> </div>
<div id="yellow"> </div>
</div>
Then you can swap the 2 classes back and forth when you need to switch styles.
I think you want something like this?
UPDATE: Now using #media querys.
PS. Resize the fiddle html painel to see the result.
I need help in centering one DIV withing a DIV.
I want to have one container DIV that is auto width to take up the whole width of the screen (lets call it headerContainer.
Within headerContainer, I want 3 more DIVs:
A Left DIV (400px wide)
A Center DIV (100px wide)
A right DIV (200px wide).
I want the center DIV directly in the middle of the screen. Right now I can only get it to center between the left and right DIV.
Thanks for any help.
CSS:
.leftDiv{
float: left;
width: 400px;
}
.rightDiv{
float: right;
width: 200px;
}
.centerDiv{
width: 100px;
margin: 0 auto;
}
HTML:
<div>
<div class="leftDiv">left</div>
<div class="rightDiv">right</div>
<div class="centerDiv">center</div>
</div>
DEMO:
Code: http://jsfiddle.net/Xxwrm/6/
Fullscreen: http://jsfiddle.net/Xxwrm/6/show
This works.
.headerContainer{
width:auto !important;
}
.leftDiv{
float:left;
width:400px;
}
.rightDiv{
float:right;
width:200px;
}
.centerDiv{
display:inline;
width:100px;
margin-left:auto;
margin-right:auto;
}
.
<div class="headerContainer">
<div class="leftDiv"></div>
<div class="centerDiv"></div>
<div class="rightDiv"></div>
</div>
What you could do is add another div at the end which makes both sides equal, and set visibility: hidden; (not display: none;); this way it would centre the middle div.
For example in this case you'd have one # 400px, another # 100px, another # 200px and another one, hidden, # 200px.
Regards,
Richard
<div class="headerContainer">
<div class="leftDiv">left</div>
<div class="rightDiv">right</div>
<div class="centerDiv">center</div>
</div>
This HTML with this CSS will work. I colored the DIV's to make it obvious.
.headerContainer{
width:auto;
}
.leftDiv{
float:left;
width:400px;
background:pink;
}
.centerDiv{
width:100px;
/*
margin-left:auto;
margin-right:auto;
*/
margin:0 auto;
background:cyan;
}
.rightDiv{
float:right;
width:200px;
background:lightgray;
}
However, if the screen is not 700px wide, you will get some wrapping.
Here is a fiddle for it, too: http://jsfiddle.net/johnpapa/9bN2p/
You can use a modern solution due the flex concept of css3.
.parent {
display: flex;
height: 300px;
/* Or whatever */
background-color: green;
}
.child {
width: 100px;
/* Or whatever */
height: 100px;
/* Or whatever */
margin: auto;
/* Magic! */
background-color: yellow;
}
<div class="parent">
<div class="child ">Div1</div>
</div>