How would I achieve a grid layout similar to the one below through the use of CSS and HTML? I've attempted the use of floating and margins, but that's only allowed me to replicate the first row.
Current HTML
<div id="lens_logo"><img src="images/about-lens.png"></div>
<div id="lightfield_logo"></div>
<div id="body_logo"></div>
<div id="spec_logo"></div>
Current CSS
#lens_logo {
height: 200px;
width: 350px;
margin-left: 50px;
margin-bottom: 50px;
float: left;
background-color: #000;
}
#lightfield_logo {
height: 200px;
width: 350px;
margin-left: 200px;
margin-bottom: 50px;
float: left;
background-color: #000;
}
#body_logo {
height: 200px;
width: 350px;
background-color: #000;
margin-left: 200px;
float: left;
}
#spec_logo {
height: 200px;
width: 350px;
background-color: #000;
margin-left: 200px;
float: left;
}
Which produces this result:
I would recommend bootstrap for stuff like this http://getbootstrap.com/
It's grid system is really powerful and easy to use.
You could implement this grid using an expansion of the following snippet:
<div class="row">
<div class="col-xs-5"></div>
<div class="col-xs-5"></div>
</div>
<div class="row">
<div class="col-xs-5"></div>
<div class="col-xs-5"></div>
</div>
To implement the spaces between the divs you can either use the bootstrap offset css classes or give your divs custom classes and put the margins in there.
You could wrap the four divs in a container the size you want and float each div to the sides. So wrapping container could be:
.grid {
width: 750px;
height: 450px;
}
Here is a fiddle.
http://jsfiddle.net/rnumjd1q/
Related
The first two align perfectly, but the third one just won't. .. Can anyone here tell me what i'm doing wrong? I was stuck at this for hours last night, and this morning, by looking at other similar questions here, I was able to get the first two divs to align, but the third one won't no matter what. There is an entirely different div below it that it keeps going inside of instead of going up to align itself with the other two.
HTML & CSS
.framebox:after {
content: "", ;
clear: both;
display: table;
}
.frame1 {
float: left;
width: 300px;
height: 300px;
background-color: white;
margin-left: 40px;
margin-right: 5px;
}
.frame2 {
margin: 0 auto;
width: 300px;
height: 300px;
background-color: white;
}
.frame3 {
width: 30%;
height: 300px;
background-color: white;
margin-left: 5px;
margin-right: 40px;
float: right;
}
<div class="framebox">
<div class="frame1">
<h2> dfgdfg</h2>
</div>
<div class="frame2">
<h2> dfgdfg </h2>
</div>
<div class="frame3">
<h2> dfgdfg </h2>
</div>
</div>
First. Set them all to float left, so the will try to pack left until they fill the page width.
If you set some of the widths percentually and other in absolute numbers, your design wont work for all screen sizes. You'll have to do a lot of math. I suggest you use all widths percentual, so they will behave in all screens.
In your case, they would align to the top only in screens where the width of all elements together isn't greater than the width of the screen.
I changed the background colors so we could see better.
obs: If you know the min screen size this has to work, you can use absolute numbers. You'll have to make the divs with their margins fit on the smallest considered screen size.
.framebox:after {
content: "", ;
clear: both;
display: table;
}
.frame1 {
background-color: yellow;
float: left;
width: 33%;
height: 300px;
// margin-left: 40px;
// margin-right: 5px;
}
.frame2 {
background-color: blue;
float: left;
margin: 0 auto;
width: 33%;
height: 300px;
}
.frame3 {
background-color: green;
width: 33%;
height: 300px;
// margin-left: 5px;
// margin-right: 40px;
float: left;
}
<div class="framebox">
<div class="frame1">
<h2> dfgdfg</h2>
</div>
<div class="frame2">
<h2> dfgdfg </h2>
</div>
<div class="frame3">
<h2> dfgdfg </h2>
</div>
</div>
On to the real question. I started learning HTML and I ran into a circumstance that I don't understand why it happens and was hoping someone could explain this to me.
Above is my code and what I don't get is why the introduction of the word text in box1 causes the whole box to be displayed on a new line.
Once the text is removed it realigns. any help is welcome.
I'm going to end this off by saying that I tried pasting in code (using the code blocks button and surrounding my code with <code> and <pre> tags but the editor would not display the code or would break the code block by every second)
Try vertical-align:top; with inline-block.
When we use inline-block we can align blocks in 3 different way's, like if 2 block have large height and one has small then using vertical-align:top; make all three block aligned at top using vertical-align:middle; make these three block aligned middle and using vertical-align: bottom; make these blocks aligned at the bottom side
div {
display: inline-block;
vertical-align:top;
margin: 25px;
}
p {
padding: 10px;
text-align: center;
}
#box1 {
width: 100px;
height: 100px;
background-color: red;
}
#box2 {
width: 100px;
height: 100px;
background-color: blue;
}
#box3 {
width: 100px;
height: 100px;
background-color: yellow;
}
<div id="container">
<div id="box1"><p>text</p></div>
<div id="box2"></div>
<div id="box3"></div>
</div>
It is because you have a pixel value for the width and height of all 3 of your divs. The text "increases" the width and pixel value of your divs.
UPDATE
Why not use the float property?
div {
float: left;
display: block;
margin: 25px;
}
p {
padding: 10px;
text-align: center;
}
#box1 {
width: 100px;
height: 100px;
background-color: red;
}
#box2 {
width: 100px;
height: 100px;
background-color: blue;
}
#box3 {
width: 100px;
height: 100px;
background-color: yellow;
}
<div id="container">
<div id="box1"><p>text</p></div>
<div id="box2"></div>
<div id="box3"></div>
</div>
This question already has answers here:
How to place two divs next to each other? [duplicate]
(13 answers)
Closed 7 years ago.
I'm creating a webpage and trying to create the basic outline of my site by using div tags, however, I made a side-navigation div and body div. The size of my site is 1500px width and 1000px height, the side-navigation is 300px and body is 1200px.
I thought this would place them side by side, but, the body div, for some reason, went underneath the side-navigation div.
<body>
<div id="encase">
<div id="topNav">
<p> topNav </p>
</div>
<div id="header">
<p> header</p>
</div>
<div id="wholeBody">
<div id="sideNav">
<p> sideNav </p>
</div>
<div id="body1">
<p> body1 </p>
</div>
</div>
<div id="footer">
<p> footer </p>
</div>
</div>
and this is the css
<style>
#encase {
width: 100%;
height: 100%;
margin-left: auto;
margin-right: auto;
}
#header {
background-color:black;
width: 1490px;
height:110px;
margin-left: auto;
margin-right: auto;
padding: 5px;
}
#topNav {
background-color:green;
width: 1490px;
height: 50px;
margin-left: auto;
margin-right: auto;
padding: 5px;
}
#wholeBody {
background-color: red;
width: 1490px;
height: 690px;
margin-left: auto;
margin-right: auto;
padding: 5px;
}
#sideNav {
background-color: yellow;
width: 290px;
height: 690px;
/*margin-left: 10.25%;*/
padding: 5px;
}
#body1 {
background-color: purple;
width: 1190px;
height: 690px;
margin-left: 16%;
padding: 5px;
}
#footer {
background-color: blue;
width: 1490px;
height: 110px;
margin-left: auto;
margin-right: auto;
padding: 5px;
}
</style>
I tried to do this using percentages as well, but, percentages don't seem to work properly for me. Does anyone have any idea of how to solve my problem? Thank You.
Float your side nav to left. This should fix your problem.
#sideNav {
background-color: yellow;
width: 290px;
height: 690px;
float: left;
padding: 5px;
}
Divs are block elements - this means that, by default, each new div will start on a new line. So we need to cancel that behavior via CSS. We can use the "float" property to make the divs move next to each other:
#sideNav {
background-color: yellow;
width: 290px;
height: 690px;
/*margin-left: 10.25%;*/
padding: 5px;
float: left;
}
Once you add in the float, you can switch this all back to % and it will work fine, too.
In the future, I would encourage you to look at HTML5, if possible, as it has better tag names that can reduce the number of divs you are using. This makes for cleaner, more readable code.
Just include a float:left inside your sideNav class in order to push the other div to the right,
fiddle url: https://jsfiddle.net/eugensunic/j030jyjm/
#sideNav {
float:left;
background-color: yellow;
width: 290px;
height: 690px;
/*margin-left: 10.25%;*/
padding: 5px;
}
Your calculation about the width is wrong, you are using margin-left: 16% in #body1 which is one of the factors causing this problem otherwise float:left would have fixed the problem.
Check out this fiddle: https://jsfiddle.net/4jnbb5w3/
I'm trying to align three divs horizontally but facing some problems.
I'm doing this to build some modals.
Thanks!
html code
<div id="modal-wrapper">
<div class="modal-body"></div>
<div class="modal-body-2"></div>
<div class="modal-body-3"></div>
</div>
css code
.modal-body{
float:left;
width: 100%;
}
.modal-body-2{
margin-left: 100%;
width:100%;
padding: 15px;
}
.modal-body-3{
margin-left: 200%;
width:100%;
padding: 15px;
}
#modal-wrapper{
display: inline-block;
width: 100%;
margin: 0 auto;
}
Here is a JSFiddle I made: http://jsfiddle.net/5m1n8p0q/1/. You're spacing each element the entire width of a page. With a 3 div layout, you want just 1/3 or 33% of the width. I placed a padding-right property of 0.5px to mitigate the gap between a 33% and 33.33...% width.
HTML:
<div class="modal-body">asdf</div>
<div class="modal-body-2">asdf</div>
<div class="modal-body-3">asdf</div>
CSS
.modal-body{
float:left;
width: 33.3%;
background: red;
}
.modal-body-2{
display: inline-block;
width: 33.3%;
background: blue;
}
.modal-body-3{
float: right;
width: 33.3%;
background: green;
padding-right: 0.5px;
}
I am trying to make a simple tile grid. Here is my HTML:
<div class="tiles">
<div class="tile25x50">1</div>
<div class="tile50x50">2</div>
<div class="tile25x50">3</div>
</div>
And CSS:
.tiles {
width :100px;
}
.tile25x50 {
width: 50px;
height: 25px;
background-color: red;
float: left;
}
.tile50x50 {
width: 50px;
height: 50px;
background-color: blue;
float: left;
}
And the result is:
My question is how can I prevent the third div to be inserted in new row and instead fill the gap?
Live demo in jsfiddle.
Split layout in columns if you don't need to expand items in columns, if not use something like masonry. In simple CSS you would probably ended with dozens with wrappers and javascript either way or with one item solutions.
If you change the .tile50x50 to float:right, it works out, but I'm not sure how much this could really be extended to include more tiles properly.
This should work for modern browsers (includes IE10) - http://jsfiddle.net/yqkt8/
Instead of float, display inline-block, then use css columns.
.tiles {
width: 100px;
-webkit-column-width: 50px; -moz-column-width: 50px; column-width: 50px;
-webkit-column-gap: 0; -moz-column-gap: 0; column-gap: 0;
}
.tile25x50 {
display:inline-block;
width: 50px;
height: 25px;
background-color: red;
}
.tile50x50 {
display:inline-block;
width: 50px;
height: 50px;
background-color: blue;
}
change to float:right the float value of .tile50x50
.tile50x50 {
width: 50px;
height: 50px;
background-color: blue;
float: right;
}
You CAN use Float: right; but that would flow differently on different browsers. I would use a table with one row and multiple columns
<table>
<tr>
<td><div class="tile25x50">1</div></td>
<td><div class="tile50x50">2</div></td>
<td><div class="tile25x50">3</div></td>
<td><div class="tile50x50">4</div></td>
<td><div class="tile50x50">5</div></td>
</tr>
</table>
Ive included an edit here
EDIT:
Well if you do not want to use tables, try an un-ordered list here.
I would suggest to change the style of .tile50x50 from float left to float right.
I just fiddled around on your fiddle file and I was able to align the divs in a couple steps.
First place the div 3 between the other two divs
Now for the CSS:
.tiles {
width :100px;
}
.tile25x50 {
width: 50px;
height: 25px;
background-color: red;
float: left;
clear: both; /* Clears both sides so the div 3 drops down */
}
.tile50x50 {
width: 50px;
height: 50px;
background-color: blue;
float: left;
margin-top: -25px; /* Pushes this div back up to align with the other one */
}
There is an easier/more flexible way to do this and that would be:
(This option also removes float on the 25X50 tiles making it easier to stack.)
<div class="your-class-here"> <!-- this div will hold the two in there without having to do negative margin values -->
<div class="tile25x50">1</div>
<div class="tile25x50">2</div>
</div>
<div class="tile25x50">1</div>
Simply change tile50x50 class from float:left; to float:right;:
.tile50x50 {
width: 50px;
height: 50px;
background-color: blue;
float: right;
}
DEMO:
http://jsfiddle.net/dirtyd77/LAR3x/
You have to change the .tile50x50 css class value float:left to float:right.
Here is the complete code -
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style type="text/css">
.tiles {
width :100px;
}
.tile25x50 {
width: 50px;
height: 25px;
background-color: red;
float: left;
}
.tile50x50 {
width: 50px;
height: 50px;
background-color: blue;
float: right;
}
.clear{
clear:both;
}
</style>
</head>
<body>
<div class="tiles">
<div class="tile25x50">1</div>
<div class="tile50x50">2</div>
<div class="tile25x50">3</div>
</div>
</body>
</html>
Please don't use Jquery or hacks like using negative margins. HTML/CSS will be just fine :)
Depending on any further layout requirements, you can do one of two things:
1) Simply remove the 50px block from the ".tiles" container, float each of them left and change the 100px width constraint of ".tiles" to 50px
fiddle.net/HHeSW/3/
HTML
<div class="tiles">
<div class="tile25x50">1</div>
<div class="tile25x50">3</div>
</div>
<div class="tile50x50">2</div>
CSS
.tiles {
float: left;
width:50px;
}
.tile25x50 {
width: 50px;
height: 25px;
background-color: red;
float:left;
}
.tile50x50 {
width: 50px;
height: 50px;
background-color: blue;
float: left;
}
2) Add a container div for each column. You can reuse the same column class for these and even drop the width constraints on ".tiles" and the column class for future flexibility :)
http://jsfiddle.net/wurwH/3/
HTML
<div class="tiles">
<div class="column">
<div class="tile25x50">1</div>
<div class="tile25x50">3</div>
</div>
<div class="column">
<div class="tile50x50">2</div>
</div>
</div>
CSS
.tiles {
width:100px;
}
.column{
float:left;
}
.tile25x50 {
width: 50px;
height: 25px;
background-color: red;
clear:left;
}
.tile50x50 {
width: 50px;
height: 50px;
background-color: blue;
}
i would suggest you two jQuery plugins:
http://masonry.desandro.com/
http://isotope.metafizzy.co/
EDIT:
Check out my cssdeck: http://cssdeck.com/labs/ojo7uw0l
I write HTML and CSS for this solution. I don't use table layout, float: right or position: absolute.
HTML
<h1>Example 1</h1>
<div class="tiles">
<div class="tile tile--one">1</div>
<div class="tile tile--two">2</div>
<div class="tile tile--one title--modified">3</div>
</div>
<h1>Example 2</h1>
<div class="tiles">
<div class="tile tile--one">1</div>
<div class="tile tile--two">2</div>
<div class="tile tile--one title--modified">3</div>
<div class="tile tile--two">2</div>
<div class="tile tile--one">1</div>
<div class="tile tile--two">2</div>
<div class="tile tile--one title--modified">3</div>
</div>
CSS
*,
*:after,
*:before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
h1 {
margin: 40px 0;
}
.tiles {
width: 400px;
overflow: hidden;
}
.tile {
text-align: center;
float: left;
border: 1px solid #f0f0f0;
}
.tile--one {
background-color: rgba(255, 20, 20, .6);
width: 200px;
height: 100px;
}
.tile--two {
background-color: rgba(20, 20, 255, .6);
width: 200px;
height: 200px;
}
.title--modified {
margin-top: -100px;
}
I hope it can help you. This is demo
Demo
I can't actually believe people here didn't figure this out. How on the earth's sake can 3 divs with a sum width of 150px show up in a single row that accepts a width of 100px. You simply need to adjust the width in the .tiles class.
.tiles {
width :150px;
}
.tile25x50 {
width: 50px;
height: 25px;
background-color: red;
float: left;
}
.tile50x50 {
width: 50px;
height: 50px;
background-color: blue;
float: left;
}