I have 4 DIVs positioned like viewed in image. Div1 and Div 2 And Div 3 are placed inside the Footer Div. The contents of 3 Divs are dynamic and I don't know what height they need. How can I set these 3 divs height to a same value?
I've tried different solutions like setting top and button to 0px as here mentioned:
Make div 100% height of browser window
This is what I currently have:
This is my HTML Layout:
<div class="About">
<div class="RightAbout">
</div>
<div class="CenterAbout">
</div>
<div class="LeftAbout">
</div>
</div>
This is my CSS Classes:
.About
{
padding:0px;
background-color:#757575;
border:none;
min-height:250px;
color:White;
font-size:12pt;
}
.RightAbout
{
display:inline-block;
width:290px;
min-height:100%;
border-left:solid 1px #CDCDCD;
margin:0px 0px 0px 0px;
padding:0px 5px 0px 5px;
vertical-align:top;
background-color:blue;
}
.CenterAbout
{
display:inline-block;
width:290px;
min-height:100%;
border-left:solid 1px #CDCDCD;
margin:30px 0px 30px 0px;
padding:0px 5px 0px 5px;
vertical-align:top;
}
.LeftAbout {
display: inline-block;
min-height:100%;
border: none;
padding: 0px 5px 0px 5px;
margin: 30px 0px 30px 0px;
vertical-align: top;
}
Like this
demo
css
body, html {
height: 100%;
}
.About
{
padding:0px;
background-color:#757575;
border:none;
min-height:250px;
color:White;
font-size:12pt;
display:table;
}
.RightAbout
{
display:table-cell;
width:290px;
min-height:100%;
border-left:solid 1px #CDCDCD;
margin:0px 0px 0px 0px;
padding:0px 5px 0px 5px;
vertical-align:top;
background-color:blue;
}
.CenterAbout
{
display:table-cell;
width:290px;
min-height:100%;
border-left:solid 1px #CDCDCD;
vertical-align:top;
background-color:#757575;
}
.LeftAbout {
display:table-cell;
min-height:100%;
border: none;
width:290px;
vertical-align: top;
background-color:#757575;
}
You seem to have the same problem as this individual:
How to Force Child Div to 100% of Parent's Div Without Specifying Parent's Height?
This should solve your problem and help with similar problems in the future:
Equal Height Columns with Cross-Browser CSS
Related
Why is the two boxes to the right side, and not centered align?
fiddle: http://jsfiddle.net/gh76q/1/
I, tried change the position of box 2 to relative, it will do the trick but the box moves when hovering the box 1.
HTML:
<div align="center" id="top-link">
<div class="switch">
<div class="avg_display">Box 1</div>
<div class="avg_hide">Box1 info<br></div></div>
<div class="link-block">Box2</div>
</div>
CSS:
#top-link {padding-bottom:40px;}
.switch {display:inline-block;}
.link-block {
display: inline-block;
padding: 20px 20px 20px 20px;
border: 2px solid #e7e7e7;
border-radius: 5px;
height:25px;
width:200px;
text-align:center;
margin-top:10px;
margin-right:20px;
position:absolute;
color:#555;
}
.link-block a {
text-align: center;
vertical-align: middle;
line-height: 25px;
color:#555;
}
.link-block:hover {
background-color:#1396d0;
border:2px solid #1396d0;
color:#fff;
margin-top:10px;
margin-right:20px;
}
.link-block:hover a{
color:#fff;
}
.avg_display {
display:inline-block;
padding: 20px 20px 20px 20px;
border: 2px solid #e7e7e7;
border-radius: 5px;
height:25px;
width:200px;
text-align:center;
margin-top:10px;
margin-right:20px;
}
.avg_hide {
display:none;
padding: 20px 20px 20px 20px;
background-color:#1396d0;
border:2px solid #1396d0;
color:#fff;
border-radius: 5px;
height:250px;
width:200px;
text-align:center;
margin-top:10px;
margin-right:20px;
}
.avg_display a {
text-align: center;
vertical-align: middle;
line-height: 25px;
color:#555;
}
Fiddle:
Remove position:absolute from the box2 class.
.link-block {
display: inline-block;
padding: 20px 20px 20px 20px;
border: 2px solid #e7e7e7;
border-radius: 5px;
height:25px;
width:200px;
text-align:center;
margin-top:10px;
margin-right:20px;
/*position:absolute;*/
vertical-align:top; /* Keep the box always on top */
color:#555;
}
DEMO
The issue
I have a fixed navigation bar on my website (z-index: 98) and a rotating banner (z-index: 96).
When I scroll down, however, the content positioned relatively on the banner appears higher (in z-space) than the navigation bar.
Screenshots
Code
Banner:
div#banner {
padding-top:60px;
z-index: 98;
width: 100%;
background: url(../img/bannerImg_1.jpg) no-repeat center center;
background-size:cover;
height:340px;
border-bottom: 1px solid #422358;
box-shadow: 0 10px 10px -10px black;
z-index: 96;
}
div#banner div#bannerWrap {
width:1080px;
margin: 0 auto;
height:100%;
position:relative;
}
div#bannerWrap div#logoLeft {
position:absolute;
top:50%; margin-top:-164px;
left:0;
width:305px;
height:328px;
background: url(../img/bannerLogo.png) no-repeat center center;
float:left;
}
div#bannerWrap div#logoRight {
position:absolute;
top:50%; margin-top:-164px;
right:0;
width:305px;
height:328px;
background: url(../img/bannerLogo.png) no-repeat center center;
float:right;
}
div#bannerWrap div#textRight {
position:absolute;
top:50%; margin-top:-20px;
right:0;
text-align:right;
color:white;
font-weight:bold;
font-size:28px;
text-shadow: 3px 3px 0 #1f3848;
float:right;
}
Navbar:
div#topBar {
width:100%;
height:60px;
margin:0 auto; padding:0;
background: #1f3848;
color:white;
font-size:12px;
position:fixed;
}
div#topBar div#tBContainer {
width:1080px;
margin: 0 auto; padding: 0;
}
div#topBar div#tBLogo {
width:56px;
height:60px;
background: url(../img/tB_logo.png) no-repeat;
display:block;
float:left;
margin-right:20px;
}
div#topBar div#tBLeft {
float:left;
padding-top:15px;
}
div#topBar div#tBRight {
float:right;
padding-top:15px;
text-align:right;
}
By default, z-Index doesn't work with position:static elements.
It only works with position:relative/absolute/fixed elements.
This might work:
div#banner
{
position:relative;
z-index:96;
}
Reference: z-index - CSS-Tricks
z-index repeated twice please check. and you don't have to specify any z-index to div#banner. please follow below css
div#banner {
padding-top:60px;
width: 100%;
background: url(../img/bannerImg_1.jpg) no-repeat center center;
background-size:cover;
height:340px;
border-bottom: 1px solid #422358;
box-shadow: 0 10px 10px -10px black;
}
div#topBar {
width:100%;
height:60px;
margin:0 auto; padding:0;
background: #1f3848;
color:white;
font-size:12px;
position:fixed;
z-index:2;
}
why you giving the z-index value twice? Also by watching the screenshot its clear banner is coming over the navigation because of higher z-index value. either give this one negative value or the give the positive higher value to navigation.
div#banner {
padding-top:60px;
z-index: 98;/* repeated*/
width: 100%;
background: url(../img/bannerImg_1.jpg) no-repeat center center;
background-size:cover;
height:340px;
border-bottom: 1px solid #422358;
box-shadow: 0 10px 10px -10px black;
z-index: 96;/* repeated */
}
Note: while using z-index its required to use positioning either relative or absolute
I'm trying to create a header, where the logo and menu are centered in the page, however the background color of the menu div is extended across to the right side of the screen.
http://jsfiddle.net/gKnuY/777/,
HTML
<div id="wrap" align="center">
<div id="header" >
<div class="header-logo">
Logo Here
</div>
<div class="header-menu">
ABOUT | CARREERS | PRODUCTS | SOMTETHING | OTHER
</div>
</div>
<div id="main"></div>
</div>
THE CSS
*{
margin:0px;
}
html, body {height: 100%;}
#wrap {min-height: 100%;}
#main {overflow:auto;
padding-bottom: 70px;}
#footer {position: relative;
margin-top: -70px;
height: 70px;
background-color:#383838;
-webkit-box-shadow: 0px -10px 5px 5px #cacaca;
box-shadow: 0px -10px 5px 5px #cacaca;
clear:both;}
#header {
height:100px;
left:0px;
right:0px;
width:960px;
}
.header-logo {
position: relative;
float:left;
background-color:#654654;
width:200px;
height:100px;
}
.header-menu {
position:relative;
text-align:left;
float:left;
height:100px;
background-color:#383838;
-webkit-box-shadow: 0px 30px 5px 0px #cacaca;
box-shadow: 0px 30px 5px 0px #cacaca;
}
How would I go about this?
Thanks
On the main container of your header you need to make it expand 100% while having it left a certain amount.
This is what I changed
#header {
height:100px;
left: 40%;
width:100%;
position: relative;
background: #383838;
}
JSFIDDLE
I want something like this, click here.
This is a simple code in my HTML:
#mainContent {
margin:0;
width:100%;
height:600px;
padding: 0 0 30px 0;
}
#mainContent #sidebar { /* sidebar inside #mainContent */
float:left;
width:220px;
height:560px;
margin:10px 10px 40px 10px;
padding:10px 5px 10px 5px;
background-color:#CCCCCC;
}
#mainContent #featContent {
height:560px;
margin:10px 10px 40px 260px;
padding:10px 5px 10px 5px;
background-color:#CCCCCC;
overflow:auto;
}
<div id="mainContent">
<div id="sidebar"></div>
<div id="featContent"></div>
</div>
The problem is one of the divs are improperly placed .The #featContent div is going out of its parent #mainContent div for reason I don't understand. Check out this in jsFiddle here. The margin of #featContent goes out of the #mainContent bounds.
Demo
Add the following style to the #mainContent
#mainContent {
overflow:hidden;
}
Live demo
Add padding to parent div
#mainContent {
margin:0;
width:100%;
height:auto;
padding:10px 5px 40px 5px; background-color:red
}
#mainContent #sidebar { /* sidebar inside #mainContent */
float:left;
width:220px;
height:560px;
margin:10px 10px 40px 10px;
background-color:#CCCCCC;
}
#mainContent #featContent {
height:560px;
margin:10px 10px 40px 260px;
background-color:#CCCCCC;
overflow:auto;
}
Demo hrer http://jsfiddle.net/j4C7T/
I have a parent div (container) that has a child div (inner) which also has child divs that are dynamically created. I am using jquery to scroll horizontally on the overflow from #inner. My problem is that while I don't want #container to expand horizontally, I do want it to expand vertically however it won't expand to the full height of #inner. I have tried adding a clear div just after #inner but that didn't work. I also tried changing the display for #container to display:inline and display:inline-block. Inline vertically expanded #container to the proper height but basically changed the overflow to auto so that you would see the horizontal scroll bar on the bottom even though overflow was set to hidden. My goal is to have a vertical scroll bar and no horizontal scroll bar while having #container vertically expand to it's child content. Does that make sense? Here is my markup...
<div id="container">
<div id="inner">
<div class="post">
<p>content</p>
</div>
<div class="post">
<p>content</p>
</div>
<div class="post">
<p>content</p>
</div>
</div>
<div class="clear"></div>
</div>
and the css...
body {
margin:0;
padding:0;
height: 100%;
line-height: 1.2em;
font: normal 12px 'Helvetica','Arial','Verdana','sans-serif';
color:#E0DFE3;
background:#dad3c1 url(../images/duck-bg1500x.jpg) no-repeat fixed;
}
#container {
overflow:auto;
border:#888888 solid 1px;
margin:10px;
}
#inner {
position:relative;
top:100px;
width:3600px;
margin:0;
padding:0;
}
.post {
background:url("http://www.loodieloodieloodie.com/images/opac-bg2.png") repeat scroll transparent !important;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
-moz-box-shadow: 5px 5px 5px #888;
-webkit-box-shadow: 5px 5px 5px #888;
box-shadow: 5px 5px 5px #888;
width: 600px;
padding: 20px;
position: relative;
top:50px;
margin: 0 25px;
float:left;
}
.clear {
clear:both;
}
Thank you in advance for any and all help,
B
I think your issue is coming from using relative positions on your child elements. If you switch them to use margins for positioning, the container will hold the content a little more like you want it to (I think). Give this css a shot!
body {
margin:0;
padding:0;
height: 100%;
line-height: 1.2em;
font: normal 12px 'Helvetica','Arial','Verdana','sans-serif';
color:#E0DFE3;
background:#dad3c1 url(../images/duck-bg1500x.jpg) no-repeat fixed;
}
#container {
overflow:scroll;
border:#888888 solid 1px;
margin:10px;
}
#inner {
width:3600px;
margin:0;
padding:0;
}
.post {
background:url("http://www.loodieloodieloodie.com/images/opac-bg2.png") repeat scroll transparent !important;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
-moz-box-shadow: 5px 5px 5px #888;
-webkit-box-shadow: 5px 5px 5px #888;
box-shadow: 5px 5px 5px #888;
width: 600px;
padding: 20px;
position: relative;
margin: 50px 25px;
float:left;
}
.clear {
clear:both;
}