https://jsfiddle.net/zfacazy0/
.row {
width:200px;
background:blue;
display:block;
overflow:hidden;
}
.col{
width:30%;
margin-right:5px;
background:red;
float:left;
}
<div class="row">
<div class="col">1</div>
<div class="col">2</div>
<div class="col" style="margin-right:0">3</div>
</div>
if I put 33% and the margin is too much it will not have single row. Either I adjust margin or width, I just can't do a proper 3 column with equal margin and width. Need help.
Check this. You can use the first-child attribute to remove margin from first element.
.row {
width: 200px;
background: blue;
display: block;
overflow: hidden;
}
.col {
width: 30%;
margin-left: 5%;
background: red;
float: left;
}
.col:first-child {
margin-left: 0px;
}
<div class="row">
<div class="col">1</div>
<div class="col">2</div>
<div class="col">3</div>
</div>
Just display:flex can do the trick:
.row {
width:200px;
background:blue;
display:flex;
overflow:hidden;
}
.col{
width:33%;
margin-right:5px;
background:red;
}
<div class="row">
<div class="col">1</div>
<div class="col">2</div>
<div class="col" style="margin-right:0">3</div>
</div>
.row {
width: 200px;
background: blue;
display: flex;
overflow: hidden;
}
.col {
width: 33.33%;
margin-right: 5px;
background: red;
float: left;
}
<div class="row">
<div class="col">1</div>
<div class="col">2</div>
<div class="col" style="margin-right:0">3</div>
</div>
Related
I have this fiddle which has three blocks of equal width. How can we make this of different sizes, say given 100%, first block 20%, second block 50% and the third 30%.
<div class="Row">
<div class="Column">C1</div>
<div class="Column">C2</div>
<div class="Column">C3</div>
</div><div class="Row">
<div class="Column">C1</div>
<div class="Column">C2</div>
<div class="Column">C3</div>
</div>
.Row
{
display: table;
width: 100%;
table-layout: fixed;
border-spacing: 10px;
}
.Column
{
display: table-cell;
background-color: red;
}
You could use nth-child:
.Row {
display: table;
width: 100%;
table-layout: fixed;
border-spacing: 10px;
}
.Column {
display: table-cell;
background-color: red;
}
.Column:nth-child(1) {
width:20%;
}
.Column:nth-child(2) {
width:50%;
}
.Column:nth-child(3) {
width:30%;
}
<div class="Row">
<div class="Column">C1</div>
<div class="Column">C2</div>
<div class="Column">C3</div>
</div>
I have a layout where I have 3 columns.
<div id="wrapper">
<div id="logo"></div>
<div id="search-input"></div>
<div id="user-name"></div>
</div>
How can I place these 3 blocks in one line without JS, calc and flexbox if I need:
logo should be fixed
user-name should have auto width
search-input should places on the left free space between logo and user-name blocks. It has to be fluid container.
Use flexbox:
#wrapper {
display: flex;
/* flex-direction: row; <-- by default */
}
#logo {
flex: 0 0 200px;
background-color: lightgreen;
}
#user-name {
flex: none;
background-color: lightblue;
}
#search-input {
flex: 1 0 auto;
background-color: lightgrey;
}
<div id="wrapper">
<div id="logo">logo</div>
<div id="search-input">input</div>
<div id="user-name">user name</div>
</div>
May be this is what you want. you can add content of user-name to see how it work.
.wraper{
width: 100%;
border: 1px solid red;
}
#logo{
float:left;
width:250px;
height: 50px;
border:1px solid #CCC;
display:block;
background-color:yellow;
}
#search-input{
margin-left:260px;
min-height:50px;
display:block;
background-color:red;
}
#user-name{
float:right;
display:block;
height:50px;
background-color:#FFF;
}
#search-input > .inner{
height:50px;
background-color:red;
margin-right:20px;
}
#user-name > .inner{
background-color:green;
min-width:150px;
height:50px;
margin-left:10px;
}
<div id="wrapper">
<div id="logo">Logo</div>
<div id="user-name">
<div class="inner">
user name
</div>
</div>
<div id="search-input">
<div class="inner">
search input
</div>
</div>
</div>
<div id="wrapper">
<div id="logo"></div>
<div id="search-input"></div>
<div id="user-name"></div>
</div>
<style>
#logo{float:left;padding:2px}
#search-input{width:50%;float:left;padding:2px}
#user-name{width:auto;float:left;padding:2px}
</style>
#wrapper{
display:block;
}
#logo{
display:inline-block;
width:30%;
float:left;
}
#search-input{
width:50%;
display:inline-block;
float:left;
}
#user-name{
width:auto;
display:inline-block;
float:left;
}
This will keep them in one line.
One container with four or more divs inside that line up like a perfect puzzle and the last div fills out the remaining height..
the image illustrates how it should look like
where I am at: http://jsfiddle.net/meb9h3vx/
.wrap {
float: left;
background: #fff;
width: 100%;
}
.get2 {
float: left;
height: auto;
width: 50%;
}
<div class="wrap">
<div class="get2">
<h1>1</h1>
abc
</div>
<div class="get2">
<h1>2</h1>
</div>
<div class="get2">
<h1>3</h1>
d
<br>e
</div>
<div class="get2">
<h1>4</h1>
</div>
</div>
Try using this -
remove float from both .wrap and .get2
remove text-align: center; from body css
add following css to .get2 - text-align: center; display: inline-block;
vertical-align: top;
add margin-left: -4px; css to .get2:nth-child(2) { }
and add margin-left: -4px; margin-top: -17px; css to .get2:nth-child(4)
Flexbox to the rescue with no dirty hacks:
body {
background:#000;
color:#ccc;
text-align:center;
margin:10px;
}
.wrap {
background:#fff;
width:100%;
display:flex;
flex-wrap: wrap;
height:auto;
}
.get2 {
height:auto;
width:50%;
}
.get2:nth-child(1) {
background:red;
}
.get2:nth-child(2) {
background:green;
}
.get2:nth-child(3) {
background:yellow;
}
.get2:nth-child(4) {
background:blue;
}
<div class="wrap">
<div class="get2">
<h1>1</h1>
abc
</div>
<div class="get2">
<h1>2</h1>
</div>
<div class="get2">
<h1>3</h1>
d
<br>e</div>
<div class="get2">
<h1>4</h1>
</div>
</div>
Hey you can try by giving min-height as i am giving below
.get2{
float:left;
height:auto;
width:50%;
min-height:120px
}
Fixed it! So I inline-block the div and nth-child(2n) margin-left:-4px to get rid of the white-space and vertical-align:top and then the last part I added: padding-bottom: 99999px; margin-bottom: -99999px; http://jsfiddle.net/p428b71y/1/
.wrap{
float:left;
background:#fff;
width:100%;
overflow:hidden;
}
.get2:nth-child(2n){
margin-left:-4px;
}
.get2{
vertical-align:top;
display:inline-block;
height:auto;
width:50%;
padding-bottom: 99999px;
margin-bottom: -99999px;
}
That is pretty much the effect I am trying to achieve
<div id="wrap">
<div id="three"></div>
<div id="one"></div>
<div id="two"></div>
</div>
#one{
width:80%;
height: 30px;
background-color:red;
float: right;
}
#two{
width:80%;
height: 30px;
background-color:black;
float: right;
}
#three{
float: left;
width: 20%;
height: 100%;
background-color: blue;
}
#wrap{
width: 900px;
height: 60px;
}
http://jsfiddle.net/m5u4u89f/
But is there any way to do this without wrapper div with set height for all of them? because the thrid div is supposed to have the same height as all the other divs combined.
An alternative to using table like #Khanh_TO did, you could use flex.
.thing{
flex:1;
background-color:red;
}
.thing:hover{
background-color:darkred;
}
#three{
float: left;
background-color: blue;
}
#wrap{
display:flex;
flex:1;
height:100px;
}
#wrapper{
display:flex;
flex-direction:column;
flex:1;
}
<div id="wrap">
<div id="three"><p style="transform: rotate(270deg);">text</p></div>
<div id="wrapper">
<div class="thing"></div>
<div class="thing"></div>
<div class="thing"></div>
<div class="thing"></div>
<div class="thing"></div>
</div>
</div>
My pen: http://codepen.io/helloworld/pen/IGsoe
I want to center align all divs with the yellow border how can I do that?
I tried margin:0 auto; on the parent container but that did not help.
The "items" with the yellow border should keep their percentage width. Do not change this to fixed pixel values.
HTML code:
<div class="table">
<div id="navigationWrapper">
<div class="table">
<div id="left"><image width="40px" /></div>
<div id="navBar" style="width:100%; height: 100px; background-color: grey;">
<div class="cellContainer">
<div class="alarmTemplate">A</div>
</div>
<div class="cellContainer">
<div class="alarmTemplate">B</div>
</div>
<div class="cellContainer">
<div class="alarmTemplate">C</div>
</div>
<div class="cellContainer">
<div class="alarmTemplate">D</div>
</div>
</div>
<div id="right"><image width="40px" /></div>
</div>
</div>
<div id="navigationWheeler">test</div>
</div>
CSS:
body {
padding: 0;
margin: 0;
width:100%;
height:100%;
}
.cellContainer {
margin:0 auto;
width: 20%;
float: left;
background:black;
}
.alarmTemplate{
height:80px;
margin-top:10px;
margin-bottom:10px;
margin-left:10px;
margin-right:10px;
background:lightgray;
border:yellow solid 2px;
}
#navBar, #right, #left, #navigationWheeler {
height:80px;
background:yellow;
display:table-cell;
vertical-align:middle;
}
.table {
display:table;
min-width:100%;
margin:0 auto;
}
#right, #left, #navigationWheeler {
width:40px;
}
#navigationWheeler{
background:green;
text-align:center;
}
To center the four DIVs set them to
.cellContainer {
float: none;
display: inline-block;
}
and center the navbar contents
#navBar {
text-align: center;
}
Demo Link with corrected css
.cellContainer {
margin:0 auto;
width: 20%;
/*float: left;*/
background:black;
display: inline-block;
}
#navBar{
text-align: center;
}