I'm stuck with a Div layout. there's two major Divs which include children Divs; Container and bottom. The Container (Green Div) doesn't stretch to the end of its children. Here's a screenshot:
I tried clear: both and position in different cases but didn't work.
Also need that horizontal gray Div stick to the bottom of its parents.
This is the code (although It looks different in JSFiddle from my FF/Chrome Browser): http://jsfiddle.net/7KB9z/
This is the result wanna achieve:
Code from the fiddle
This is the html
<div id="container">
<div id="middle">
<div class="right"></div>
<div class="center"></div>
<div class="left"></div>
<div style="clear: both;"></div>
</div>
<div id="bottom">
<div id="first">
<div class="right"></div>
<div class="center"></div>
<div class="left"></div>
</div>
<div id="second">
<div class="module"></div>
<div class="banner"></div>
</div>
</div>
<div style="clear: both;"></div>
</div>
This is the css
div#container {
width: 1000px;
height: 100%;
margin: 45px auto;
background: green;
}
div#middle {
width: 100%;
height: 560px;
margin-top: 20px;
}
div#middle .right {
float: right;
width: 205px;
height: 100%;
background: yellow;
}
div#middle .center {
float: right;
width: 455px;
height: 100%;
margin: 0 10px;
background: orange;
}
div#middle .left {
float: left;
width: 320px;
height: 100%;
background: blue;
}
/*Bottom section*/
div#bottom {
width: 100%;
height: 100%;
margin-top: 20px;
background: brown;
}
div#bottom #first {
float: right;
width: 100%;
height: 400px;
background: red;
}
div#bottom #first .right {
float: right;
width: 325px;
height: 100%;
background: pink;
}
div#bottom #first .center {
float: right;
width: 325px;
height: 100%;
margin: 0 12px;
background: pink;
}
div#bottom #first .left {
float: left;
width: 325px;
height: 100%;
background: pink;
}
div#bottom #second {
float: right;
width: 100%;
height: 100%;
background: black;
margin-top: 10px;
}
div#bottom #second .module {
float: right;
width: 325px;
height: 100%;
background: silver;
}
div#bottom #second .banner {
float: left;
width: 645px;
min-height: 100px;
vertical-align: bottom;
background: silver;
}
Thank you
Give position: relative to #second
and give position:absolute; bottom: 0 to #second.banner
code
div#container {
width: 1000px;
min-height: 100%;
margin: 45px auto;
background: green;
}
div#middle {
width: 100%;
height: 560px;
margin-top: 20px;
}
div#middle .right {
float: right;
width: 205px;
height: 100%;
background: yellow;
}
div#middle .center {
float: right;
width: 455px;
height: 100%;
margin: 0 10px;
background: orange;
}
div#middle .left {
float: left;
width: 320px;
height: 100%;
background: blue;
}
div#bottom {
width: 100%;
height: 100%;
margin-top: 20px;
background: brown;
}
div#bottom #first {
float: right;
width: 100%;
height: 400px;
background: red;
}
div#bottom #first .right {
float: right;
width: 325px;
height: 100%;
background: pink;
}
div#bottom #first .center {
float: right;
width: 325px;
height: 100%;
margin: 0 12px;
background: pink;
}
div#bottom #first .left {
float: left;
width: 325px;
height: 100%;
background: pink;
}
div#bottom #second {
float: right;
width: 100%;
height: 100%;
background: black;
margin-top: 10px;
position:relative;
}
div#bottom #second .module {
float: right;
width: 325px;
height: 300px;
background: silver;
}
div#bottom #second .banner {
float: left;
width: 645px;
min-height: 100px;
vertical-align: bottom;
background: silver;
position:absolute;
bottom:0;
}
Js fiddle working example jsfiddle
edit regarding a comment question: The height property specifies an absolute height. Since the content which is floated does not actually take up any vertical space.
Since we want it to expand to at least a 100% height, we can use the min-height property to force it there and still maintain the "automatic" height needed to make the parent green box fully encompass the children, letting it push past the 100% only when it needs too. So use min-height:100%;
More info: detailed explanation
Related
Having a little issue with floating and a responsive layout. I have a div container that has a left and right div container inside. The two have to be on the same "row" but when div container "RIGHT" is set to 100%, it moves it down to the next row. I have made a quick fiddle here.
http://jsfiddle.net/v5tnshjw/1/
<div class="row">
<div class="leftBox">LEFT</div>
<div class="rightBox">RIGHT</div>
</div>
.row {
float: left;
width: 600px;
height: auto;
margin: 0px auto;
}
.leftBox {
float: left;
height: 50px;
background-color: red;
width: 80px;
}
.rightBox {
float: left;
height: 50px;
width: 100%;
background-color: blue;
}
The box on the right needs to flow with the browser width but stay on the same line.
Any help or pointers would be great! Thanks in advance.
You could set the inner divs to display:table-cell with the parent as display:table and table-layout:fixed:
.row {
float: left;
width: 600px;
height: auto;
margin: 0px auto;
display:table;
table-layout:fixed;
}
.leftBox {
display:table-cell;
height: 50px;
background-color: red;
width: 80px;
}
.rightBox {
width:100%;
height: 50px;
display:table-cell;
background-color: blue;
}
<div class="row">
<div class="leftBox">LEFT</div>
<div class="rightBox">RIGHT</div>
</div>
You can also use the CSS3 calc() function :
.row {
float: left;
width: 600px;
height: auto;
margin: 0px auto;
}
.leftBox {
float: left;
height: 50px;
background-color: red;
width: 80px;
}
.rightBox {
float: left;
height: 50px;
width: calc(100% - 80px);
background-color: blue;
}
<div class="row">
<div class="leftBox">LEFT</div>
<div class="rightBox">RIGHT</div>
</div>
If the left box also needs to scale:
.row {
float: left;
width: 600px;
height: auto;
margin: 0px auto;
}
.leftBox {
float: left;
height: 50px;
background-color: red;
width: 20%;
}
.rightBox {
float: left;
height: 50px;
width: 80%;
background-color: blue;
}
I am not sure how to properly phrase this question, so bear with me while I try and explain.
I am working on a layout that is two columns but with three divs and using the Bootstrap framework. The first div is pushed to the right, the second div is pulled to the left. The third div I want it pulled to the right and set flush to the bottom of the first div. Right now the top of the third div is sitting at the bottom of the second div.
The reason why I want it laid out this way is so when viewing on a desktop there will be two columns but when viewing on a mobile devices it will shrink down to one column and the third div will be below the content in the second div.
<div class="container">
<div class="div1">DIV1. This will be on the right</div>
<div class="div2">DIV2. This will be on the left</div>
<div class="div3">DIV3. This will be on the right</div>
</div>
Full CSS here: http://jsfiddle.net/m8z37q0y/1/
Remove the position: relative; properties or add it to the container as well. Then actually use float: right; on div1 and div3 and remove the right/left properties:
.container {
width: 400px;
height: 250px;
background: #ccc;
}
.div1 {
width: 100px;
height: 100px;
background: #eee;
float: right;
}
.div2 {
width: 300px;
height: 200px;
background: #aaa;
float: left;
}
.div3 {
width: 100px;
height: 100px;
background: #777;
float: right;
}
See the DEMO
http://jsfiddle.net/m8z37q0y/7/
.container {
width: 400px;
height: 250px;
background: #ccc;
}
.div1 {
width: 100px;
height: 100px;
background:green ;
left: 300px;
float: right;
}
.div2 {
width: 300px;
height: 200px;
background: blue;
right: 100px;
float: left;
}
.div3 {
width: 100px;
height: 100px;
background: red;
float: right;
}
View Demo jsFiddle
Remove position: relative property in .div2{...} and .div3 {...} class.
Change property value float: left to float: right in .div3{...} class to archive this.
.div2 {
width: 300px;
height: 200px;
background: #aaa;
right: 100px;
float: left;
position: relative; /* Remove this */
}
.div3 {
width: 100px;
height: 100px;
background: #777;
left: 300px;
float: left; /* Set float Right */
position: relative; /* Remove this */
}
Look this demo: http://jsfiddle.net/abruzzi/m8z37q0y/8/
You should remove the all css property below:
position: relative; left...
and set correct float property like below:
.div1 {
width: 100px;
height: 100px;
background: #eee;
float: right;
}
.div2 {
width: 300px;
height: 200px;
background: #aaa;
float: left;
}
.div3 {
width: 100px;
height: 100px;
background: #777;
float: right;
}
<div class="container">
<div class="div1">DIV1. This will be on the right</div>
<div class="div2">DIV2. This will be on the left</div>
<div class="div3">DIV3. This will be on the right</div>
</div>
.container {
width: 400px;
height: 250px;
background: #ccc;
}
.div1 {
width: 100px;
height: 100px;
background: #eee;
left: 300px;
float:right;
}
.div2 {
width: 300px;
height: 200px;
background: #aaa;
right: 100px;
float:left;
}
.div3 {
width: 100px;
height: 100px;
background: #777;
left: 300px;
float:right;
}
I having problems with getting the scroll bars to appear inside the left and right container.
The scroll bars appears on the body at the moment.
Please see the fiddle: http://jsfiddle.net/pQq45/7/
HTML:
<div class="wrapper">
<div class="cont">
<div class="left">
<div class="rect"></div>
<div class="rect"></div>
...
</div>
<div class="right">
<div class="rect"></div>
<div class="rect"></div>
...
</div>
</div>
</div>
CSS:
html, body {
height: 100%;
width: 100%;
margin:0;
padding:0;
}
.wrapper {
display: table;
background-color: yellow;
width: 100%;
height: 100%;
padding: 50px 50px 0 0;
box-sizing: border-box;
}
.cont{
width: 100%;
height: 100%;
background: #333333;
display: table-row;
}
.left{
display: table-cell;
width: 200px;
height: 100%;
overflow-y: scroll;
background: #FF0000;
}
.right{
display: table-cell;
width: auto;
height:100%;
overflow: hidden;
background: #00FF00;
}
.rect{
display: inline-block;
width: 150px;
height: 40px;
margin: 3px;
background: #660000;
}
How can I get the scrolls to appear inside left and right containers, rather than on the body? So it would look like this:
This is a more complex layout. And you will run intro trouble using table-layout. I'd recommend you to ditch the table layout thing and use the following:
Demo: http://jsfiddle.net/pQq45/19/
html, body {
height: 100%;
margin:0;
padding:0;
}
.wrapper {
background-color: yellow;
height: inherit;
padding: 50px 50px 0 0;
box-sizing: border-box;
}
.cont {
background: #333333;
position: relative;
height: inherit;
}
.left {
position: absolute;
left:0;
top:0;
bottom:0;
width: 200px;
overflow: auto;
background: #FF0000;
}
.right {
position: absolute;
left: 200px;
top:0;
right:0;
bottom:0;
overflow: auto;
background: #00FF00;
}
.rect {
display: inline-block;
width: 150px;
height: 40px;
margin: 3px;
background: #660000;
}
UPDATE 2
Try this
I think it's because you have height: 100%.
Try setting a pixel height and changing display: table-cell to display: block so that they'll adhere to the height.
It should look like this:
.left{
width: 20%;
background: #FF0000;
}
.right{
width: 80%;
background: #00FF00;
}
.cont {
height: 100%;
}
.right, .left {
float: left;
display: block;
height:100%;
overflow-y: scroll;
}
You are missing
overflow-y: scroll;
On .right
I have the following code shown in this fiddle.
For the life of me I cannot get them to align the way I want them to. It is pretty easy to see where each div should be by looking at the code but here is some more help:
| topLeft | topRight | |
----------------------------------| right |
| bottomLeft | bottomRight | |
Please help me with this!
Ex 1. swapping the right positions in front of the left: http://jsfiddle.net/pTDEX/1/
html:
<div class="top">
<div class="topRight">
topRight
</div>
<div class="topLeft">
topLeft
</div>
</div>
A box floating right after a left floating box will be positioned below the box and then right.
Or ex 2. swapping the float: right for float:left: http://jsfiddle.net/pTDEX/3/
.topLeft {
background: green;
float: left;
width: 300px;
height: 80px;
}
.topRight {
background: gray;
float: left;
width: 100px;
height: 80px;
}
It'll float the right boxes left against the left boxes.
There are more possibilities but it's all about understanding what float does, play with it!
On a side-note, you can safely ditch display: inline when specifying fixed blocks.
I used absolute positioning on the subelements and relative positioning on your container, this is easy as long as you know the dimensions of your elements (in px or %)
.container {
background: cyan;
margin: 0 auto;
width: 500px;
height: 100px;
position:relative;
}
.top {
background: purple;
position:absolute;
top:0;
left:0;
width: 400px;
height: 80px;
}
.topLeft {
background: green;
display: inline;
width: 300px;
height: 80px;
position:absolute;
top:0;
left:0;
}
.topRight {
background: gray;
display: inline;
float: right;
width: 100px;
height: 80px;
position:absolute;
top:0;
left:300px;
}
.bottom {
background: black;
display: inline;
width: 400px;
height: 20px;
position:absolute;
top:80px;
left:0;
}
.BottomLeft {
background: blue;
display: inline;
width: 300px;
height: 20px;
position:absolute;
top:0;
left:0;
}
.bottomRight {
background: red;
display: inline;
width: 100px;
height: 20px;
position:absolute;
top:0;
right:0;
}
.right {
background: yellow;
display: inline;
float: right;
width: 100px;
height: 100px;
position:absolute;
top:0;
left:400px;
}
Check out the updated fiddle:
http://jsfiddle.net/pTDEX/2/
(Note that the position relative attribute on the container is just so that a) absolutely positioned elements within it will position relative to the container. b) it respects your margin 0 auto; (which it wouldn't if you gave it position:absolute)
You main problem in your html code, just an order of div tag Right
<div class="container">
<div class="right">right</div> <!-- replaced top with right -->
<!-- your mistake was fixed here -->
<div class="top'">
<div class="topRight">topRight</div>
<div class="topLeft">topLeft</div>
</div>
<div class="bottom">
<div class="bottomRight">bottomRight</div>
<div class="bottomLeft">BottomLeft</div>
</div>
</div>
Your Css style
//Css Style
.container {
background: cyan;
margin: 0 auto;
width: 500px;
height: 100px;
}
.top {
background: purple;
float: left;
width: 400px;
height: 80px;
}
.topLeft {
background: green;
display: inline;
float: left;
width: 300px;
height: 80px;
}
.topRight {
background: gray;
display: inline;
float: right;
width: 100px;
height: 80px;
}
.bottom {
background: black;
display: inline;
float: left;
width: 400px;
height: 20px;
}
.BottomLeft {
background: blue;
display: inline;
float: left;
width: 300px;
height: 20px;
}
.bottomRight {
background: red;
display: inline;
float: right;
width: 100px;
height: 20px;
}
.right {
background: yellow;
display: inline;
float: right;
width: 100px;
height: 100px;
}
I have a DIV who's borders are made up of images. What I'm trying to do is have this DIV auto expand (in height only) whenever the content does not fit the content area. Otherwise it should just use the min-height. Here is my markup:
XHTML:
<div id="alerts">
<div id="alerts-top"></div>
<div id="alerts-left"></div>
<div id="alerts-content">
<div id="alerts-header">
<p>Alerts</p>
</div>
<div id="alerts-main">
<!-- content in here -->
</div>
</div>
<div id="alerts-right"></div>
<div id="alerts-bottom"></div>
</div>
CSS:
#alerts { float: left; width: 267px; height: 200px; }
#alerts #alerts-top { float: left; background: url(../images/alerts-top.png) no-repeat; height: 12px; min-width: 257px; }
#alerts #alerts-left { float: left; background: url(../images/alerts-left.png) repeat-y; height: 100%; width: 12px; }
#alerts #alerts-content { float: left; min-width: 239px; height: 206px; min-height: 206px; }
#alerts #alerts-content #alerts-header { background: url(../images/alerts-bell.png) no-repeat; height: 20px; width: auto; padding: 10px; }
#alerts #alerts-content #alerts-main { background-color: #FFFFFF; height: auto; }
#alerts #alerts-right { float: left; background: url(../images/alerts-right.png) repeat-y; height: 100%; width: 12px; }
#alerts #alerts-bottom { float: left; background: url(../images/alerts-bottom.png) no-repeat; height: 11px; width: 258px; }
This isn't working for me - there is a gap between the bottom border and the left and right borders. The content area is #alerts-main.
Try this for #alerts-bottom:
#alerts #alerts-bottom {
float: left;
background: url(../images/alerts-bottom.png) no-repeat;
height: 11px;
width: 258px;
margin-top: -9px;
}
With a negative value for margin-top property you control how the div will be displayed (in this case you'll force the #alerts-bottom div to be rendered 9px above the default display).
Hope it helps.
After a "five minutes" consideration I've wrote this code and it will do what you want. Just change the styles to add the images as backgrounds. First the CSS:
#wrapper { position: relative; width: 500px; min-height: 350px; }
#alerts { position: relative; height: 50px; background-color: red; width: 90%; text-align: center; margin: auto; margin-top: 10px; margin-bottom: 10px; }
#top-margin { position: absolute; height: 10px; top: 0; background-color: gray; width: 100%; }
#right-margin { position: absolute; width: 10px; right: 0; background-color: gray; height: 100%; }
#bottom-margin { position: absolute; height: 10px; bottom: 0; background-color: gray; width: 100%; }
#left-margin { position: absolute; width: 10px; left: 0; background-color: gray; height: 100%; }
#content { text-align: justify; padding: 65px 20px 20px 20px; }
And the HTML:
<div id="wrapper">
<div id="top-margin">
<div id="alerts">Alerts alerts alerts</div>
</div>
<div id="right-margin"></div>
<div id="bottom-margin"></div>
<div id="left-margin"></div>
<div id="content">Lorem ipsum dolor sit amet etc...</div>
</div>
The #wrapper's height will expand as more text is added. Sorry that I've changed the names of the Ids and justified the text. But that can easily be remedied.