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;
}
Related
I have two boxes inside my <header>-tag, which has a total width of 100%. When i align them up they fit perfect, but when i'm shrinking the window the right box jumps down beneath the left one. Here's the code:
header {
width: 100%;
height: 90px;
}
#head {
float: left;
background-image: url('img/header.jpg');
height: 120px;
margin-right: 10px;
width: 65%;
}
#userinfo {
float: left;
height: 100px;
width: 33.2%;
background-color: #202020;
padding: 10px;
position: relative;
}
<header>
<section id="head">
</section>
<section id="userinfo">
test
</section>
</header>
Any quick fixes? Imagining this happens with the rest of my design as I'm moving forward. Thanks in advance.
The problem here is you are using some values for padding and margin on your elements and those by default are added to the actual size of the element, since both elements are 98.2% of the container +20 of the values at some point they don't fit into the 100% and will break.
To solve it you can use box-sizing property which will make the padding and border values be inside the total declared size, and since that doesn't work with margin you will need an extra container to use padding and create the separation:
header {
width: 100%;
height: 90px;
}
#head {
float: left;
box-sizing:border-box;
padding-right: 10px;
width: 65%;
}
#head > div {
background-image: url('http://placehold.it/500');
height: 120px;
}
#userinfo {
box-sizing:border-box;
float: left;
height: 100px;
width: 35%;
background-color: #202020;
padding: 10px;
position: relative;
}
<header>
<section id="head">
<div></div>
</section>
<section id="userinfo">
test
</section>
</header>
Thanks DaniP, that solved it. But what about the content and sidebars part then?:
#container {
margin: 30px auto;
width: 70%;
min-height: 400px;
}
#leftmenu {
float: left;
box-sizing: border-box;
width: 20%;
min-height: 600px;
background-color: #202020;
}
#content {
float: left;
box-sizing: border-box;
width: 60%;
background-color: #202020;
min-height: 600px;
}
#content > div {
background-color: #202020;
min-height: 600px;
}
#rightmenu {
float: left;
box-sizing: border-box;
width: 20%;
min-height: 600px;
background-color: #202020;
}
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 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'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
Here is my current code but i don't see what the problem is. I'm new to html so i'm not really sure. I'd like to have a column on the left at about 20% space, column in the center which takes 60% of the space and column on the right that takes 20% space.
#wrapper {
background-color: #788D9A;
padding-bottom: 1000px;
margin-bottom: -1000px;
}
#mainleft {
width: 20%;
float: left;
padding: 10px;
text-align: center;
background-color: #ABB8C0;
padding-bottom: 1000px;
margin-bottom: -1000px;
border-right: solid black;
display:inline-block;
}
#maincenter {
width: 60%;
float: left;
overflow: hidden;
text-align: center;
padding: 10px;
padding-bottom: 1000px;
margin-bottom: -1000px;
display:inline-block;
}
#mainright {
width: 20%;
float: left;
padding: 10px;
text-align: center;
background-color: #ABB8C0;
padding-bottom: 1000px;
margin-bottom: -1000px;
border-right: solid black;
}
You need to be mindful when using padding-left padding-right margin-left margin-right border-left and border-right when you want that type of layout.
Each of those styles affect the overall width of that element so adding a padding: 10px will actually make your div width = 20% + 20px.
If you want to have that inner padding and border style an inner div
Example: http://jsfiddle.net/b62Ju/2/
HTML
<div id="wrapper">
<div id="mainleft">
<div>L</div>
</div>
<div id="maincenter">
<div>C</div>
</div>
<div id="mainright">
<div>R</div>
</div>
</div>
CSS
#wrapper {
background-color: #788D9A;
}
#wrapper > div
{
height: 1000px;
float: left;
text-align: center;
}
#mainleft {
width: 20%;
background-color: #ABB8C0;
}
#maincenter {
width: 60%;
}
#mainright {
width: 20%;
background-color: #ABB8C0;
}
#maincenter > div
{
height: 1000px;
border-left: solid black;
border-right: solid black;
}
#mainleft > div,
#maincenter > div,
#mainright > div
{
padding: 10px;
}
Alternatively you could use the box-model styles:
.box
{
box-sizing: border-box;
ms-box-sizing: border-box;
webkit-box-sizing: border-box;
moz-box-sizing: border-box;
}
more info: http://www.quirksmode.org/css/box.html
The display: table properties seem like the best choice here. You get your equal height columns (I assume that's what the crazy bottom margin/padding was for), no extra markup, and padding without having to worry about adjusting the box-model (learn more about the box-model here: http://css-tricks.com/the-css-box-model/).
http://jsfiddle.net/b62Ju/3/
#wrapper {
display: table;
width: 100%;
}
#wrapper > div
{
display: table-cell;
padding: 1em;
}
#mainleft {
width: 20%;
background-color: orange;
}
#maincenter {
width: 60%;
}
#mainright {
width: 20%;
background-color: green;
}
For your Reference if we need to place three dives side by side,
HTML:
<div class="main">
<div class="left">...</div>
<div class="center">...</div>
<div class="right">...</div>
</div>
CSS:
.main {
width: 1000px;
float: left;
display: inline-block;
}
.left {
width : 20%;
float: left;
display: inline-block;
}
.right {
width : 20%;
float: left;
display: inline-block;
}
.center {
width : 60%;
float: left;
display: inline-block;
}
it will work.
I think in your code you need set width for main wrapper div.