What is the best way to draw the following grid without using a table or bootstrap...just simple css? Is using a table the only way?
There can be numerous ways, This is just one example:
.col,.container {
border:1px solid #000000;
}
.row1 {
display:flex;
}
.col {
flex:1;
}
<div class="container">
<div class="row1">
<div class="col">col1</div>
<div class="col">col2</div>
</div>
<div class="row2">row2</div>
</div>
Try It Once
.step1{
position:relative;
width:98%;
height:100px;
border:1px solid red;
padding:5px;
}
.left{
width:50%;
float:left;
height:100%;
border:1px solid #600;
}
.right{
width:48%;
float:right;
height:100%;
border:1px solid #ff8800;
}
.step2{
width:98%;
height:100px;
border:1px solid blue;
padding:5px;
}
<div class="step1">
<div class="left"></div>
<div class="right"></div>
</div>
<div class="step2"></div>
Using Flexbox with minimal mark up, keeping in mind brower compatability issues with flexbox: http://caniuse.com/#feat=flexbox
.container {
border:1px solid #000000;
display:flex;
flex-wrap: wrap;
}
.col {
border:1px solid #000000;
flex-grow:1;
}
.row {
flex-basis:100%;
}
<div class="container">
<div class="col">col1</div>
<div class="col">col2</div>
<div class="row">row</div>
</div>
Related
I am trying to place two divs on same line.
<div id="page">
<div id="first-box">
</div>
<div id="second-box">
this is second box
</div>
</div>
css
div#page {
background-color: slategrey;
width: 960px;
height:900px;
margin: 20px;
padding:20px;
border:4px solid blue;
}
div#first-box{
width:200px;
height:200px;
display:inline-block;
border:1px groove black;
}
div#second-box{
display:inline-block;
width:200px;
height:200px;
padding:10px;
border:1px solid green;
}
it place itself in same line when I use vertical-align:top in the second-box. But why it behave like that? Thanks
http://codepen.io/rajinirajadev/pen/xgBVab
add this line in your second-box's css:
div#second-box{
display:inline-block;
width:200px;
height:200px;
padding:10px;
border:1px solid green;
vertical-align: top; // add this line
}
Short and Sweet
My solution is very simple; I use less CSS, and the secret of aligning both DIV is to simply add display: inline-flex; to your #page DIV.
Below is the full code:
HTML
<div id="page">
<div id="first-box">
This is the first box
</div>
<div id="second-box">
this is second box
</div>
</div>
CSS
body{
background:grey;
color:white;
}
#page{
padding:20px;
display: inline-flex;
display: -webkit-inline-flex; /* Safari */
}
#first-box, #second-box{
width:200px;
height:150px;
border: 1px solid black;
padding:10px
}
#second-box{
border: 1px solid green;
}
Click HERE for a working CODEPEN
[UPDATE: 09/13/2020] IF YOU WANT TO USE CSS-GRID RATHER THAN INLINE-FLEX
#page2{
padding:20px;
display: grid;
grid-template-columns:repeat(auto-fill, minmax(200px, 1fr) ) ;
}
#first-new-box, #second-new-box{
height:150px;
border: 1px solid black;
padding:10px
}
#second-new-box{
border: 1px solid green;
}
<div id="page2">
<div id="first-new-box">
This is the first new box
</div>
<div id="second-new-box">
this is the second new box
</div>
</div>
Try this code
div#first-box{
width:200px;
height:200px;
display:inline-block;
border:1px groove black;
float: left;
}
live demo - http://codepen.io/anon/pen/YNgqRN
while adding contents to the first block also it works fine
div#page {
background-color: slategrey;
width: 960px;
height:900px;
margin: 20px;
padding:20px;
border:4px solid blue;
}
div#first-box{
width:200px;
height:200px;
display:inline-block;
border:1px groove black;
}
div#second-box{
display:inline-block;
width:200px;
height:200px;
padding:10px;
border:1px solid green;
}
<div id="page">
<div id="first-box">
this is first box
</div><div id="second-box">
this is second box
</div>
</div>
Try this ..
div#page {
background-color: slategrey;
width: 960px;
height:900px;
margin: 20px;
padding:20px;
border:4px solid blue;
}
div#first-box{
width:200px;
height:200px;
display:inline-block;
border:1px groove black;
}
div#second-box{
display:inline-block;
width:200px;
height:200px;
border:1px solid green;
float:left;
}
<div id="page">
<div id="first-box">
</div>
<div id="second-box">
this is second box
</div>
</div>
Change display:table-cell to each id & add vertical-align:top for text to display at top but it is not important for box alignment. And you are done. Remove any floats.
div#page {
background-color: slategrey;
width: 960px;
height:900px;
margin: 20px;
padding:20px;
border:4px solid blue;
}
div#first-box{
width:200px;
height:200px;
display:table-cell;
border:1px groove black;
vertical-align:top;
}
div#second-box{
display:table-cell;
width:200px;
height:200px;
border:1px solid green;
vertical-align:top;
}
<div id="page">
<div id="first-box">
</div>
<div id="second-box">
this is second box
</div>
</div>
Replace Your css with below code:
Added Float:left, Position:relative, and Margin and it will not disturb you in further coding also.
div #page {
background-color: slategrey;
width: 960px;
height:900px;
margin: 20px;
padding:20px;
border:4px solid blue;
}
div #first-box{
width:200px;
height:200px;
display:inline-block;
border:1px groove black;
/* extra added 3 lines */
position: relative;
float:left;
margin:10px;
}
div #second-box{
display:inline-block;
width:200px;
height:200px;
padding:10px;
border:1px solid green;
/* extra added 3 lines */
position: relative;
float:left;
margin:10px;
}
<div id="page">
<div id="first-box">
<br clear="all">
</div>
<div id="second-box">
this is second box
</div>
just replace ur code with this one
I've the web page like the below layout.
The content of css file is following.
#green{
border:20px solid #3D3;
float:left;
display:block;
}
#orange{
width:100px;
height:100px;
border:10px solid orange;
float:left;
}
.child{
border:10px solid black;
display:inline-block;
margin:0px;
}
.parent{
border:10px solid #f00;
display:table;
padding:0px;
margin:0px;
}
.clear{
clear:both;
}
The html content is following.
<div class="parent">
<div class="child">
<div id='green'> </div>
<div id="orange"></div>
<div class="clear"> </div>
</div>
</div>
I've gotten the rendering result as following.
why do I have white gap in the layout?
I've not added any white color gap in the div tag.
Please help me.
Thanks.
that is happened because you set parent display property to table and child display property to inline-block . just remove display:inline-block; property of your div.child ,it works fine.I'm added the snippet below.
#green{
border:20px solid #3D3;
float:left;
display:block;
}
#orange{
width:100px;
height:100px;
border:10px solid orange;
float:left;
}
.child{
border:10px solid black;
/*display:inline-block;*/
margin:0px;
}
.parent{
border:10px solid #f00;
display:table;
padding:0px;
margin:0px;
}
.clear{
clear:both;
}
<div class="parent">
<div class="child">
<div id='green'> </div>
<div id="orange"></div>
<div class="clear"> </div>
</div>
</div>
Fighting the Space Between Inline Block Elements ,The reason you get the spaces is because, well, you have spaces between the elements (a line break and a few tabs counts as a space, just to be clear). Minimized HTML will solve this problem, you can simply fix this font-size:0 property ,
check the reference site https://css-tricks.com/fighting-the-space-between-inline-block-elements/
.parent {
font-size:0;
}
see the attached snippet
#green {
border: 20px solid #3D3;
float: left;
display: block;
}
#orange {
width: 100px;
height: 100px;
border: 10px solid orange;
float: left;
}
.child {
border: 10px solid black;
display: inline-block;
margin: 0px;
}
.parent {
border: 10px solid #f00;
display: table;
padding: 0px;
margin: 0px;
font-size:0;
}
.clear {
clear: both;
}
<div class="parent">
<div class="child">
<div id='green'> </div>
<div id="orange"></div>
<div class="clear"> </div>
</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.
In my site layout I'm using a negative margin to move my left column up next to my banner so it overlaps. The problem is I don't know what the banner's height will be in the final version. At first I used position:absolute on the left column, but that won't work because it needs to be part of the layout and push down the footer if necessary. I'd like to know how to position the left column to the top of the page, because then I could set a top margin the same height as the header since that won't change height. I could figure this out with javascript but I'd like to avoid that and use pure css.
https://jsfiddle.net/z77fwaj7/1/
#Header
{
background-color: gray;
height: 50px;
}
#Banner
{
background-color: orange;
height: 50px;
}
#Content
{
background-color:white;
border:1px solid red;
max-width:500px;
margin:0px auto;
}
#LeftColumn
{
float:left;
height:200px;
width:25%;
background-color: blue;
margin-top:-51px;/*this needs to be dynamic*/
}
#MiddleColumn
{
float:left;
height:200px;
width:45%;
background-color: yellow;
}
#RightColumn
{
float:left;
height:250px;
width:30%;
background-color: green;
}
#Footer
{
background-color: gray;
height: 50px;
}
<div id="Header">header</div>
<div id="Banner">banner</div>
<div id="Content">
<div id="LeftColumn">left</div>
<div id="MiddleColumn">middle</div>
<div id="RightColumn">right</div>
<div style="clear:both;"></div>
</div>
<div id="Footer">footer</div>
Is this Ok.
<style type="text/css">
#Header
{
background-color: gray;
height: 50px;
}
#Banner
{
background-color: orange;
height: 50px;
}
#Content
{
background-color:white;
border:1px solid red;
max-width:500px;
margin:0px auto;
}
#LeftColumn
{
float:left;
height:200px;
width:25%;
background-color: blue;
margin-top:0px;
}
#MiddleColumn
{
float:left;
height:200px;
width:45%;
background-color: yellow;
}
#RightColumn
{
float:left;
height:250px;
width:30%;
background-color: green;
}
#Footer
{
background-color: gray;
height: 50px;
}
</style>
<div>
<div id="Header">header</div>
<div id="Banner">banner</div>
<div id="Content">
<div id="LeftColumn">left</div>
<div id="MiddleColumn">middle</div>
<div id="RightColumn">right</div>
<div ></div>
</div>
<div id="Footer" style="clear:both;">footer</div>
</div>
If anyone is curious I had to change my layout in order to get it working without javascript. BackgroundBanner won't change height when Banner shrinks, but in my case that doesn't matter since it will be out of view anyway.
https://jsfiddle.net/z77fwaj7/4/
css:
#Header
{
background-color: gray;
height: 50px;
}
#Background
{
position:absolute;
width:100%;
z-index:-1;
}
#BackgroundBanner
{
height: 50px;
background-color:orange;
}
#Banner
{
float:left;
background-color: orange;
height: 50px;
width:75%;
}
#Content
{
background-color:white;
border:1px solid red;
max-width:500px;
margin:0px auto;
}
#LeftColumn
{
float:left;
height:200px;
width:25%;
background-color: blue;
}
#MiddleColumn
{
float:left;
height:200px;
width:45%;
background-color: yellow;
}
#RightColumn
{
float:left;
height:250px;
width:30%;
background-color: green;
}
#Footer
{
background-color: gray;
height: 50px;
}
html:
<div id="Header">header</div>
<div id="Background">
<div id="BackgroundBanner"></div>
</div>
<div id="Content">
<div id="LeftColumn">left</div>
<div id="Banner">banner</div>
<div id="MiddleColumn">middle</div>
<div id="RightColumn">right</div>
<div style="clear:both;"></div>
</div>
<div id="Footer">footer</div>
As a conclusion:
Using a value of an element on another element in css is not possible. (as far as i know)
So there are two solutions:
Change the layout.
Use javascript.
I would prefer the second. Don't know why it's such a shame to do so.
A short simple javascript is better then mess up the layout. (In my opinion)
How would one create a layout as in the image below:
Is it possible only with the float attribute where we have four divs? I have roughly the following code and 3 is pushed down by 2 (Browsers IE8+).
#one #three {
float: left;
}
#two, #four {
float: right;
}
<div id="one"></div>
<div id="two"></div>
<div id="three"></div>
<div id="four"></div>
Note: height(1) + height(3) != height(2)
See if this code structure answers your needs ... jsFiddle Demo here
HTML
<div class="col_1">
<div id="one">1</div>
<div id="three">3</div>
</div>
<div class="col_2">
<div id="two">2</div>
<div id="four">4</div>
</div>
CSS
.col_1{
width:100px;
height:300px;
margin:1px;
float:left;
}
.col_2{
width:100px;
height:300px;
margin:1px;
float:left;
}
#one{
width:100px;
height:150px;
background:yellow;
}
#two{
width:100px;
height:200px;
background:blue;
}
#three{
width:100px;
height:50px;
background:green;
}
#four{
width:100px;
height:100px;
background:purple;
}
Kindly see this jsfiddle http://jsfiddle.net/pvashishat/49chp8ny/
use HTML
<div id="xxx">
<div class="left_wrap">
<div class="one"></div>
<div class="three"></div>
</div>
<div class="right_wrap">
<div class="two"></div>
<div class="four"></div>
</div>
</div>
CSS
.left_wrap {
width: 100px;
float: left;
}
.right_wrap {
width: 300px;
float: left;
}
.one, .three {
border: 1px solid #000;
height: 40px;
}
.two, .four {
border: 1px solid #000;
height: 80px;
}
#xxx {
display:inline-block;
}