I have html like below
<div>
<div class="left">
</div>
<div class="center">
</div>
<div class="right">
</div>
</div>
.left
{
background: none repeat scroll 0 0 white;
border-right: 1px solid #C3C3C3;
float: left;
margin-top: 30px;
min-height: 100%;
position: absolute;
width: 170px;
}
.center
{
background: none repeat scroll 0 0 white;
float: left;
margin-left: 171px;
margin-top: 30px;
min-height: 100%;
position: absolute;
width:895px;
}
.right
{
background: none repeat scroll 0 0 #DEDFE8;
border-left: 5px solid #BDC1DE;
float: right;
margin-top: 30px;
min-height: 100%;
position: absolute;
width: 276px;
}
when the center panel stretches the right and left panels stay at there height of 100%
Is there a way of stretching the right and left panels when the center panel stretches.
Edit
When the center panel consists of html controls that make the center div expand more than the min-height of 100% the left and right panels do not expand and these panels have different colors and borders and the page doesnt look right as you can see gaps after the when right and left panels do not expand and the center panel does.
Personally I like the equal height columns from www.ejeliot.com
http://jsfiddle.net/spacebeers/s8uLG/3/
You set your container up with overflow set to hidden, then on each div add negative margin-bottom and equal positive padding-bottom.
#container { overflow: hidden; }
#container div { float: left; background: #ccc; width: 200px; margin-bottom: -2000px; padding-bottom: 2000px; }
#container .col2 { background: #eee; }
<div id="container">
<div>
<p>Content 1</p>
</div>
<div class="col2">
<p>Content 2</p>
<p>Content 2</p>
<p>Content 2</p>
<p>Content 2</p>
</div>
</div>
Faux Columns is also good and probably easier to set up but if you're really dead against using an image this is a pretty good method.
Based on your edit, you mean you want them to expand vertically. There are a few ways to do this, but my favorite is faux columns.
You basically put a background with your column colors on the whole containing div and it gives the illusion that all three columns are the same height.
You're still going to want to workout your positioning issues. As I mentioned before, position:absolute should be used with either top, left, bottom or right. Or, instead of absolute positioning, you can use floats. You can't use both :)
set the outer div that contains the divs below with width:100%, position:absolute and min-height:100%
then change the css to this
.left
{
background: none repeat scroll 0 0 white;
border-right: 1px solid #C3C3C3;
margin-top: 30px;
min-height: 100%;
position: absolute;
width: 170px;
}
.center
{
background: none repeat scroll 0 0 white;
float: left;
margin-left: 171px;
margin-top: 30px;
width:895px;
}
.right
{
background: none repeat scroll 0 0 #DEDFE8;
border-left: 5px solid #BDC1DE;
margin-top: 30px;
min-height: 100%;
position: absolute;
width: 276px;
}
<div class="width:100%;position:absolute;min-height:100%">
<div class="left">
</div>
<div class="center">
</div>
<div class="right">
</div>
</div>
Related
everyone!
I'm having a div height/border issue. Here's the script I'm working with:
.content
{
background-image: url(../../images/logo-04.png);
background-position: left bottom;
background-repeat: no-repeat;
background-size: 30%;
border-bottom: 0.1em solid #000000;
border-bottom-left-radius: 1em;
border-bottom-right-radius: 1em;
border-top: 0.1em solid #000000;
display: inline-block;
width: 100%;
}
.content-left
{
float: left;
font-size: 100%;
text-align: justify;
width: 74%;
}
.content-right
{
border-left: 1px solid #000000;
float: right;
font-size: 80%;
height: 100%;
text-align: right;
width: 25%;
}
And here's a snippet of the div I'm working with:
<div class="container2">
<!-- Content -->
<div class="content">
<div class="content-left">
</div>
<div class="content-right">
<div class="sidelinks">
<ul>
<li><a class="link3" href=""></a></li>
<li><a class="link3" href=""></a></li>
</ul>
</div>
<div class="social">
<---End--!>
The divs above are closed properly in my code (I didn't want to bore anyone with the extra coding).
For some reason, I can't seem to get my left border to extend the length of the content-right div unless I use pixels (height: 500px). I usually use percentage, but at height: 100%, the border only goes as far as the contents inside the content-right div.
Any suggestions to get my desired effect?
You're not defining a height for .content, so even with height:100% it's only 100% of the parent, content.. Try setting content height to 100% and see if the border goes with it
I am using bootstrap.css and <div class="box">/''HTML content'''/</div>
class=box is div box with white background
I have vertical menu inside <div class="box">/''vertical menu''/</div>
When run the page I don't get the div box covering the full vertical menu.
div box CSS
.box {
padding: 50px 30px;
background: #fff;
position: relative;
border-radius: 10px;}
and i have added <div id="leftmenu"> inside box
leftmenu css
#leftmenu {
margin-left: 100px;
float: left;
width: 25%;
}
and am listing two div in same row 2 div in same row works but div box does't cover the 2 div
error
div box does't cover the vertical menu
jsfiddle
Add overflow: hidden; to the .box class like this:
JSFiddle - DEMO
.box {
padding: 50px 30px;
background: #fff;
position: relative;
border-radius: 10px;
overflow: hidden;
}
OR: place your <div style="clear:both"></div> inside the <div class="box"></div> - DEMO
You can add float:left; width:100%; to your code.
.box {
padding: 50px 30px;
background: #fff;
position: relative;
border-radius: 10px;
float:left;
width:100%;
}
JsFiddle is here.
I know that there are tons of questions about this but I've been searching Google for 4 days now and nothing is seeming to work for me. I'm trying to implement a sticky footer - meaning that when there is not enough content to fill the screen, the footer is at the bottom of the screen and when there is enough content to fill the screen, the footer stays below that content and you scroll down.
I have tryed roughly 15 different sticky footer solutions and while most of them work in theory, my particular situation keeps messing it up my content has borders on the left and right that should extend down to the footer. Anything involving push won't work.
Here is the most recent incarnation of what I've tried:
HTML
<div id="container">
<div id="header">
<!--Banner goes here-->
<div id="nav">Navigation Links</div>
</div>
<div id="content">
<p>Content Goes Here</p>
</div>
<div id="footer">
</div>
</div>
CSS
html, body {
padding: 0;
margin: 0;
height: 100%;
}
#container {
min-height: 100%;
position: relative;
}
#content {
padding: 20px;
border-left: solid 30px lightblue;
border-right: solid 30px lightblue;
}
#footer {
position: absolute;
bottom: 0;
width: 100%;
height: 80px;
border-top: solid;
text-align: center;
padding-top: 10px;
}
How do I get this sticky footer to work while also getting those blue borders to extend down to the footer?
Here's a solution that uses box-shadow to create the "border:" http://jsfiddle.net/FT8KR/. The pixel values were rather arbitrary, so play with those. Border can also be used, but it pushes the scroll bar more inwards, whereas box-shadow naturally does not.
#container {
height: 100%;
margin: 0 auto -80px;
overflow: auto;
padding-bottom: 80px;
padding: 0 30px;
box-shadow: inset -48px 0 0 lightblue,
inset 30px 0 0 lightblue;
}
body{
padding-bottom: 90px
}
#footer {
position: absolute;
bottom: 0;
left: 0;
right:0 ;
height: 80px;
border-top: solid;
text-align: center;
padding-top: 10px;
}
How can the parent div auto resize it's height based on the child's height?
div#main{
width: 970px;
height: 100px;
background: rgba(255,0,0,1);
border: 5px solid rgb(251,151,117);
margin: 20px 0px 20px 0px; /* Top Right Bottom Left*/
padding: 10px
}
div#left{width: 383px;
height: 100%;
margin-right: 5px;
background: rgb(0,0,255);
float:left
}
div#description{width: 100%;
height: 50%;
background: rgb(0,0,0)
}
div#following{width: 100%;
height: 50%;
background: rgb(0,255,0)
}
div#posts{width: 577px;
height: auto;
margin-left: 5px;
background: rgb(255,255,0);
float: right
}
<div id="main">
<div id="left" class="cell">
<div id="description" class="cell">
</div>
<div id="following" class="cell">
</div>
</div>
<div id="posts" class="cell">
there are some contents here (height is set to auto)
</div>
</div>
I made a very simple example for you to see how variable parent height works.
.parent
{
height: auto;
border: 1px dashed #f00;
padding: 5px;
}
.child
{
height: 100px;
border: 1px dashed #0f0;
}
<div class="parent">
<div class="child">
</div>
</div>
Follow what is there and you'll do fine.
After looking through your code it's a float problem, you have to add a new div to the bottom with clear: both; to clear the floats and make the #main div appear filled in.
Look at example here.
div#main{
width: 970px;
background: rgba(255,0,0,1);
border: 5px solid rgb(251,151,117);
margin: 20px 0px 20px 0px; /* Top Right Bottom Left*/
padding: 10px
}
Remove height attribute
CSS3
.container {
display: inline;
position: relative;
}
Should fix it. Use inline-block if you want it to be a block with inline.
I am bad at integration its crasy. I float a lot of my stuff and find that whenever I start floating something I have to float its container ans its containers container ad nauseum because otherwise the container is collapsed.
So looking at my site now its pretty nice a stable but if I put a border on body I see that it is 1px high on top and everything in body is outside. If I float body then everything looks good but:
1- Is that bad design and how should I do it?
2- If its ok how do I center body? I use margin: auto. But once body is floated it stops working.
This is my css.
body {
width: 960px;
font-size: 13px;
margin: auto;
margin-top: 20px;
border: 1px #000 solid;
}
.wrapper {
float: left;
width: 960px;
}
.header {
float: left;
width: 960px;
border: 1px #000 solid;
margin-bottom: 20px;
}
.menu {
width: 960px;
float: left;
border: 1px #000 solid;
}
.sidebar {
width: 260px;
float: left;
margin-top: 20px;
margin-left: 20px;
}
.content {
border: 1px #000 solid;
margin-left: 20px;
margin-top: 20px;
width: 620px;
float: left;
padding: 10px;
}
.footer {
border: 1px #000 solid;
width: 960px;
float: left;
margin-top: 20px;
}
And the layout file:
<body>
<div class="wrapper">
<div class="header">
<h1>HEADER</h1>
</div>
<div class="menu">
<ul>
<li>Home</li>
</ul>
</div>
<div class="sidebar">
sidebar
</div>
<div class="content">
<h1>Content</h1>
</div>
<div class="footer">
<h1>FOOTER</h1>
</div>
</div>
</body>
Anyways hope I am clear.
Replace the float with overflow: auto in .wrapper and it should work just fine. You can then center it with margin: auto:
.wrapper {
overflow: auto;
margin: auto;
width: 960px;
}
Also, remove width: 960px and margin: auto from body as you don't need them anymore.
If you set your container's overflow to auto or hidden you shouldn't have to float it too (unless you want to for other reasons). Such as:
<div id="container">
<div id="left">Content! this should be floated left</div>
</div>
#container { overflow: auto; border: 1px solid #000; }
#left { float: left; }
Should have the container display with the border around everything.
Yes, floating all the elements like that is bad design and an abuse of the float element. It would be well worth your while to learn the natural flow of the elements and proper use of CSS position.