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
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 have a layout wherein the container has a fixed height and width of 640px x 480px. Inside this container are 3 divs, top, mid and bot. I want this 3 divs to fit inside the container provided that they will not overflow the container. The top and bot div doesn't have fixed height while the mid should fit the space between and push top and bot.
What I've already tried was like this:
HTML
<div class="main">
<div class="top">
</div>
<div class="mid">
<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/b/bf/Chestnut-breasted_Malkoha2.jpg/593px-Chestnut-breasted_Malkoha2.jpg" />
</div>
<div class="bot">
</div>
</div>
CSS
.main {
padding: 10px;
width: 640px;
height: 480px;
display: inline-block;
background: #000;
position: relative;
}
.top {
width: 100%;
height: 50px;
display: block;
background: #eee;
}
.mid {
width: 100%;
height: 100%;
display: block;
background: #333;
}
img {
max-width: 100%;
max-height: 100%;
margin: 0 auto;
display: block;
}
.bot {
width: 100%;
height: 50px;
display: block;
background: #ccc;
}
FIDDLE HERE
Now my problem is the mid push the bot outside the container. How can i make them fit inside the container without using overflow: hidden? Thanks in advance.
NOTE : the image should fit inside the mid container.
UPDATE top and bot div can contain paragraphs so it's not fixed height.
Check this sample:
http://jsfiddle.net/J6QTg/8/
.main {
padding: 50px 0px;
width: 640px;
height: 480px;
display: block;
background: #000;
position: relative;
box-sizing: border-box;
-moz-box-sizing: border-box;
}
.top {
width: 100%;
height: 50px;
display: block;
background: #eee;
position: absolute;
top : 0;
left : 0;
}
.mid {
width: 100%;
height: 100%;
display: block;
background: #333;
}
img {
max-width: 100%;
max-height: 100%;
margin: 0 auto;
display: block;
}
.bot {
width: 100%;
height: 50px;
display: block;
background: #ccc;
position: absolute;
bottom : 0;
left : 0;
}
Update:
It is also possible to use tables, to have more flexible boxes.
http://jsfiddle.net/jslayer/U3EaZ/
HTML:
<div class="box">
<div class="h"> Hello<br/>Cruel<br/>World </div>
<div class="m">
<img src="http://goo.gl/a1smCR" alt="" />
</div>
<div class="b"> Omg </div>
</div>
CSS:
.box {
display: table;
width: 640px;
height: 480px;
background: red;
}
.h, .m, .b {
display: table-row;
}
.h {
background: yellow;
height: 0;
}
.m {
background: green;
}
.m img {
max-width: 100%;
height: 100%;
max-height: 100%;
margin: 0 auto;
display: block;
}
.b {
background: blue;
height: 0;
}
I would use JavaScript/JQuery: FIDDLE
I've used JQuery for simplicity, but it can probably be done with just JavaScript...
var totalheight = eval($('.main').height() - $('.top').outerHeight(true) - $('.bot').outerHeight(true))
$('.mid').outerHeight(totalheight);
Try to set the height of mid based on the container.
.mid {
width: 100%;
height: 383px;
display: block;
background: #333;
}
FIDDLE
If the container has a fixed height and width, then you can set the height to 79.25% like this:
.mid {
max-width: 100%;
height: 79.25%;
display: block;
background: #333;
}
demo
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
looked for other examples but couldn't find any. my image container uses max-width/max-height so the image scales to the container but I can't seem to get it to auto margin top/bottom or vertical align it to the middle without setting a height.
html, body {
width: 100%;
height: 100%;
margin: 0px;
}
#container {
border: solid 1px #000;
height: 100%;
width: 65%;
position: absolute;
right: 0;
}
#container img {
max-width: 100%;
max-height: 100%;
display: block;
margin: auto;
vertical-align: middle;
}
<div id="container"><img src="http://rack.2.mshcdn.com/media/ZgkyMDEyLzEyLzE2LzAzL3NjcmVlbnNob3QyXzJlb2RkLnBuZwpwCXRodW1iCTg1MHg1OTA+CmUJanBn/5b500a85/9ee/screen-shot-2012-12-14-at-9-45-01-am.jpg" />
</div>
http://jsfiddle.net/beftR/
I could only get it to work by adding another div named #container2 to your code. I used table/table-cell display type to do it. Here is what I did (jsFiddle here).
html, body {
width: 100%;
height: 100%;
margin: 0px;
}
#container {
border: solid 1px #000;
height: 100%;
width: 65%;
position: absolute;
right: 0;
display:table;
}
#container2 {
display:table-cell;
vertical-align:middle;
}
#container img {
max-width: 100%;
max-height: 100%;
}
<div id="container">
<div id="container2">
<img src="http://rack.2.mshcdn.com/media/ZgkyMDEyLzEyLzE2LzAzL3NjcmVlbnNob3QyXzJlb2RkLnBuZwpwCXRodW1iCTg1MHg1OTA+CmUJanBn/5b500a85/9ee/screen-shot-2012-12-14-at-9-45-01-am.jpg" />
</div>
</div>