I need to have three divs in a row and fourth div displayed below these divs.
See the layout http://i.imgur.com/k3TFW6b.jpg (just illustration)
I've tried to use display block for the parent div mixed with display inline/inline-block for these three divs and some other settings but it always breaks first row and displays these divs in block.
Do you have any idea how to fix this?
Thanks.
Instead of using display:inline on a div, a simpler solution might be using the float property in CSS. With the help of adding a width and height we can make complex layouts:
html, body{
margin:0; padding:0;
height:100%;
}
body{
background:#48c;
}
#container{
height:50%;
width:50%;
margin:auto;
}
.rect{ float:left; height:100%; }
#box1{ width:50%; background:#999; }
#box2{ width:25%; background:#666; }
#box3{ width:25%; background:#333; }
#box4{ width:100%; background:#000; }
<body>
<div id="container">
<div class="rect" id="box1"></div>
<div class="rect" id="box2"></div>
<div class="rect" id="box3"></div>
<div class="rect" id="box4"></div>
</div>
</body>
Simple and effective Solution would be CSS Table layout
HTML
.Row
{
display: table;
width: 100%;
table-layout: fixed;
border-spacing: 7px;
}
.Column
{
display: table-cell;
background-color: gray;
}
<div class="Row">
<div class="Column">First</div>
<div class="Column">Second</div>
<div class="Column">Third</div>
</div>
<div class="Row">
<div class="Column">Fourth</div>
<div class="Column">Fifth</div>
<div class="Column">Sixth</div>
</div>
Related
I have a dynamically creating chart whose width might keep on increasing. It is placed inside a container with fixed width and auto scroll. So the chart scrolls if it is wider than the container.
My issue is that the width of the chart is not fixed, it depends on the content.
Can I use width:auto to set the chart width as per its need. If not is there any way with just CSS to achieve it.
EDITS:I want the blocks to be in a single line even if the container has to have scroll. Is this possible just using CSS.
.container{
float:left;
width:300px;
background:#e3e3e3;
height:200px;
overflow:auto;
}
.sidebar{
float:left;
width:100px;
background:#666;
height:200px;
}
.chart{
margin:50px 20px;
}
.block{width:100px;float:left;background:#ccc;margin:10px;}
<div class="container">
CONTAINER
<div class="chart">
<div class="block">100</div>
<div class="block">200</div>
<div class="block">300</div>
<div class="block">400</div>
<div class="block">500</div>
</div>
</div>
<div class="sidebar">
SIDEBAR
</div>
The blocks have to be aligned horizontally. Updating with a image to show the output layout
If you change your .block from float: left to display: inline-block and set white-space: nowrap on your .chart, they will line up horizontal.
.container{
float:left;
width:300px;
background:#e3e3e3;
height:200px;
overflow:auto;
}
.sidebar{
float:left;
width:100px;
background:#666;
height:200px;
}
.chart{
margin:50px 20px;
white-space: nowrap;
}
.block{width:100px;background:#ccc;margin:10px;display: inline-block;}
<div class="container">
CONTAINER
<div class="chart">
<div class="block">100</div>
<div class="block">200</div>
<div class="block">300</div>
<div class="block">400</div>
<div class="block">500</div>
</div>
</div>
<div class="sidebar">
SIDEBAR
</div>
You can try to use display: table-cell;
only CSS changed :
.container{
float:left;
width:300px;
background:#e3e3e3;
height:200px;
overflow:auto;
}
.sidebar{
float:left;
width:100px;
background:#666;
height:200px;
}
.chart{
margin:50px 20px;
}
.block{width:100px;background:#ccc;padding:10px;display: table-cell;}
https://jsfiddle.net/us5Ljz7t/4/
white-space:nowrap will do the trick.
.container {
float: left;
width: 300px;
background: #e3e3e3;
height: 200px;
overflow: auto;
}
.sidebar {
float: left;
width: 100px;
background: #666;
height: 200px;
}
.chart {
/* width:800px;*/
white-space: nowrap; /* ← added */
margin: 50px 20px;
}
<div class="container">
CONTAINER
<div class="chart">
Dynamically adding chart content here
</div>
</div>
<div class="sidebar">
SIDEBAR
</div>
You can take the width: inherit, so that the width will be taken from the parent element, that is the container div.
.container{
float:left;
width:300px;
background:#e3e3e3;
height:200px;
overflow:auto;
}
.sidebar{
float:left;
width:100px;
background:#666;
height:200px;
}
.chart{
margin:50px 20px;
width: inherit
}
.block{width:100px;float:left;background:#ccc;margin:10px;}
<div class="container">
CONTAINER
<div class="chart">
<div class="block">100</div>
<div class="block">200</div>
<div class="block">300</div>
<div class="block">400</div>
<div class="block">500</div>
<div class="block">100</div>
<div class="block">200</div>
<div class="block">300</div>
<div class="block">400</div>
<div class="block">500</div>
</div>
</div>
<div class="sidebar">
SIDEBAR
</div>
Here is the fiddle
If we inspect the code,you will see that the div.header has height: 0px;
Look at image below:
I want my div to be the size of three elements .c1,.c2 and.c3`
How can I solve this problem?
I hope as well that we managed to explain my problem.
HTML:
<div class="container">
<div class="header">
<div class="c1">asdsadsadsadasda</div>
<div class="c2">asdasdas</div>
<div class="c3">sadsada</div>
</div>
</div>
CSS:
.container
{
width:100%;
height:500px;
background:red;
}
.c1
{
width:auto;
height:auto;
background:yellow;
}
.c2
{
width:auto;
height:auto;
background:gray;
}
.c3
{
width:auto;
height:auto;
background:orange;
}
.c1,.c2,.c3{width:33%;float:left;}
.header{width:70%;height:auto;margin:0 auto;background:blue;}
JSFiddle
Add overflow: auto(for example) css property to your .header class to recognize it's children's height.
JSFiddle
Use clearing divs.
HTML:
<div class="container">
<div class="header">
<div class="c1">asdsadsadsadasda</div>
<div class="c2">asdasdas</div>
<div class="c3">sadsada</div>
<div class='clearing'></div>
</div>
</div>
CSS:
.clearing {clear:both;}
I have a two column layout with one fixed column and one column of variable size with a min-width and a max-width. The columns should be flush with each other so there is no space.
An image of what I'm looking for http://imgur.com/RQXXaoz
Here's what I tried
JsFiddle: http://jsfiddle.net/49krdtf6/4/
.superOuter
{
background-color:#C0C0F0;
padding:20px;
text-align:center;
}
.outer
{
display:inline-block;
padding:20px;
background-color:#F0C0C0;
}
.test
{
overflow:hidden;
min-width:100px;
max-width:400px;
background-color:#F0F0F0;
padding:20px;
}
.test2
{
float:right;
width:200px;
padding:20px;
background-color:#F0F0C0;
}
<div class="superOuter">
When there's not enough content:<br>
<div class="outer">
<div class="test2">
Fixed content
</div>
<div class="test">
Rest with BFC
</div>
</div>
</div>
<br><br>
<div class="superOuter">
I want it to look like this (that is unless the page shrinks)<br>
<div class="outer">
<div class="test2">
Fixed Content
</div>
<div class="test">
Larger text here and it makes the whole thing go to the big size which is what I want without all the text
</div>
</div>
</div>
The problem I'm having is that my variable width column will not grow to it's max-width and is stuck at the width determined by its content.
You can use display table and table-cell to achieve this. Another difference is to discard max-width and go for just width instead.
* {
box-sizing:border-box;
}
.superOuter {
width:100%;
padding:20px;
text-align:center;
background-color:#C0C0F0;
}
.outer {
display:table;
width:100%;
padding:20px;
background-color:#F0C0C0;
}
.fixed {
display:table-cell;
width:400px;
padding:20px;
background-color:#F0F0F0;
}
.fluid {
display:table-cell;
padding:20px;
background-color:#F0F0C0;
}
<div class="superOuter">
When there's not enough content:
<br />
<div class="outer">
<div class="fixed">Fixed content</div>
<div class="fluid">Rest with BFC</div>
</div>
</div>
jsFiddle demo
UPDATE
After discussing in the comments, I believe you actually have a limit for both columns width, one being 400px and the other, 800px.
Something like this:
* {
box-sizing:border-box;
}
.superOuter {
width:100%;
text-align:center;
padding:20px;
background-color:#C0C0F0;
}
.outer {
display:table;
width:100%;
padding:20px;
background-color:#F0C0C0;
}
.fixed {
display:table-cell;
width:400px;
padding:20px;
background-color:#F0F0F0;
}
.fluid {
display:table-cell;
width:800px;
padding:20px;
background-color:#F0F0C0;
}
<div class="superOuter">
When there's not enough content:
<br />
<div class="outer">
<div class="fixed">Fixed content</div>
<div class="fluid">Rest with BFC</div>
</div>
</div>
jsFiddle demo
Is this what you are looking for?
https://jsfiddle.net/retr0ron/
What I've done here is rearranged your content in the HTML-document (notice that there can't be whitespace between the divs where I removed it, otherwise you will see a small gap between them (because of how inline-elements behave).
HTML:
<div class="superOuter">
When there's not enough content:<br>
<div class="outer">
<div class="test">
Rest with BFC
</div><div class="test2">
Fixed content
</div>
</div>
</div>
<br><br>
<div class="superOuter">
I want it to look like this (that is unless the page shrinks)<br>
<div class="outer">
<div class="test">
Larger text here and it makes the whole thing go to the big size which is what I want without all the text
</div><div class="test2">
Fixed Content
</div>
</div>
</div>
CSS:
.outer
{
max-width:600px;
min-width: 380px;
padding:20px;
background-color:#F0C0C0;
margin:0 auto;
}
.test
{
overflow:hidden;
min-width:100px;
background-color:#F0F0F0;
padding:20px;
}
.test2
{
float:right;
width:200px;
padding:20px;
background-color:#F0F0C0;
}
i have simple issue with HTML positions
in the following code i have one wrapper div> Container in this div
i have 2 more divs name is side_bar_wrap and left_wrap in left_wrap div i have
4 thumbnails divs name are same as thumbnails my issue is how can i align this 4 thumbnails div with space between right and left but no on first and last div of this group
following is my code, please help me..
<<<<<<<<<<<<<<>>>>>>>>>>>>>>>>>>>>>
.container
{
width:100%;
max-width:1170px;
margin:0 auto;
}
*
{
margin:0;
padding:0;
}
.side_bar_wrap
{
width:29%;
height:300px;
background:#148b23;
margin:0 10px 0 0;
float:left;
}
.left_wrap
{
width:70%;
float:right;
}
.thumbnails{
width: 22%;
margin: 0 11px;
position: relative;
overflow: hidden;
height:300px;
border:1px solid #cfcfcf;
float:left;
}
.inner_task
{
}
.clear
{
clear:both;
}
<<<<<<<<<<<<<<>>>>>>>>>>>>>>>>>>>>>
<div class="container">
<div style="width:29%; float:left; height:400px; background:gray; margin:40px 11px 40px 0;"></div>
<div style="width:70%;float:left; height:400px; background:gray; margin:40px 0;"></div>
<div class="side_bar_wrap"></div>
<div class="left_wrap">
<div class="thumbnails">
<div class="inner_thumb">
<div style="width:100%; height:200px; background:#efefef;"></div>
</div>
</div>
<div class="thumbnails">
<div class="inner_thumb">
<div style="width:100%; height:200px; background:#efefef;"></div>
</div>
</div>
<div class="thumbnails">
<div class="inner_thumb">
<div style="width:100%; height:200px; background:#efefef;"></div>
</div>
</div>
<div class="thumbnails">
<div class="inner_thumb">
<div style="width:100%; height:200px; background:#efefef;"></div>
</div>
</div>
</div>
<div style="width:100%; float:left; height:400px; background:gray; margin:40px 0;"></div>
</div>
You can use the first-child and last-child that css provides for you
Basically first-child allow you to make style changes to the first div, and last-child allows you to make changes to the last div
so something like this:
.thumnails:first-child {
/*NO SPACE ON ONE SIDE*/
margin-left:0px;
}
.thumnails:last-child {
/*NO SPACE ON ONE SIDE*/
margin-right:0px;
}
If you want advance alittle more you can use :nth-child(), for when you you want to change the style of the third div or whatever, so
.thumnails:nth-child(3) {
background-color:#ff0000;
}
I have this CSS:
#center{
display:table-row;
border:solid #55A 1px;
background-color:#AAF;
height:100%;
}
Actually, the border property is just ignored. Why? How can I Fix it?
DEMO
Thanks
Table rows can't have borders. Cells within a table row can, but the row itself cannot.
If you add a 'cell' to the table-row, for example:
<div id="content">
<div id="top">TOP</div>
<div id="center">
<div>CENTER</div>
</div>
</div>
Then the following CSS works:
#center{
display:table-row;
}
#center > div {
display: table-cell;
border:solid #55A 1px;
background-color:#AAF;
height:100%;
}
JS Fiddle demo.
It's important to remember that the browser will render an element as you tell it to; so if you tell a div to display: table-row it will display that way; and a table-row does not have a border. table-cells do, though, which is why I added the child div and assigned it that display property.
CSS
#content{
display:table;
border:solid black 1px;
width:250px;
height:300px;
}
.center{
display:table-row;
}
.center > div {
display: table-cell;
border:solid #55A 1px;
background-color:#AAF;
}
#top{
border:solid red 1px;
}
HTML
<div id="content">
<div class="center" style="height:50px">
<div id="top">TOP</div>
</div>
<div class="center" style="height:100%">
<div>CENTER</div>
</div>
<div class="center" style="height:50px">
<div>BOTTOM</div>
</div>
</div>
demo