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;
}
Related
I'm trying to learn css and html to do something, but isn't working.
I'm trying to do something like this:
But this is what i'm getting:
My code:
#agenda1 { width: 350px; height: 50px; background-color: white; } #agenda2{ height: 23px; background-color: #bf1a17; border-radius: 10px; margin-top: 10px; width: 60; } #textoagenda{ text-align: center; }
<div id="agenda1"> <div id="agenda2" float="left"> <div id="textoagenda"> 26/25 </div </div> </div>
Just wrap the numbers in an element and make it inline-block so that it will display inline with the text but you can apply vertical padding, border-radius for rounded corners, padding as you see fit, a background-color, and vertical-align so it will align properly with the text beside it.
span {
background: #c00011;
border-radius: .75em;
padding: .25em .5em;
vertical-align: baseline;
display: inline-block;
}
<span>26/25</span> TESTTESTASDFASDF
add margin property your main div.
#agenda1 { width: 350px;
height: 50px;
background-color: white;
margin:auto; }
#agenda2{ height: 23px;
background-color: #bf1a17;
border-radius: 10px;
margin-top: 10px;
width: 60; }
#textoagenda{
text-align: center; }
<div id="agenda1"> <div id="agenda2" float="left"> <div id="textoagenda"> 26/25 </div </div> </div>
Here you go, try this
<html>
<head>
<style>
#box1{
position:relative;
float:left;
width: 100px;
height: 100px;
background-color: green;
}
#box2{
position:relative;
float:left;
width: 100px;
height: 100px;
background-color: blue;
}
</style>
</head>
<body>
<div id="box1">contents</div>
<div id="box2">contenst</div>
</body>
</html>
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/
I'm trying to add two square ads to the right of the image on the web-site. The idea is to make this responsive like this:
http://s9.postimg.org/pdecyqi8f/div.png
Is this possible to achieve using CSS?
I use inline-block to position ads to the right and max-width: 100% to scale the image. I need the support of IE 9+ and mobile browsers.
I tried different approaches, don't even know which code example to show. It is relatively easy to position ads to the right of the image using inline-block:
div{
border: 2px solid;
}
#img,#container{
display: inline-block;
vertical-align: middle;
}
#ad1, #ad2{
width: 30px;
height: 30px;
color: red;
}
#img{
width: 100px;
height: 150px;
max-width: 100%;
color: purple;
}
<div id="img"> </div>
<div id="container">
<div id="ad1">ad1</div>
<div id="ad2">ad2</div>
</div>
http://jsfiddle.net/w7zfj1ju/
Yet in this case I won't get desired view on narrow screens. Also, since max-width: 100%; is used for #img this div would cover #ad1 and #ad2 on narrow screens.
To achieve desired mobile view I had to change HTML to the following:
div{
border: 2px solid;
display: inline-block;
}
#ad1, #ad2{
width: 30px;
height: 30px;
color: red;
vertical-align: top;
}
#img{
width: 100px;
height: 150px;
max-width: 100%;
color: purple;
}
<div id="ad1">ad1</div>
<div id="img"> </div>
<div id="ad2">ad2</div>
http://jsfiddle.net/gxnqo8da/
In this case I didn't really know how to position #ad1 to the right of the #img. I gave a try to absolute positioning, it did not work. Flex also seemed not to be an option due to compatibility reasons.
I also tried to use direction:rtl; like this:
div{
border: 2px solid;
display: inline-block;
}
#container{
direction:rtl;
border: 0px;
}
#ad1, #ad2{
width: 30px;
height: 30px;
color: red;
vertical-align: top;
}
#img{
width: 100px;
height: 150px;
max-width: 100%;
color: purple;
}
<div id="container">
<div id="ad1">ad1</div>
<div id="img"> </div>
<div id="ad2">ad2</div>
</div>
http://jsfiddle.net/n1mo76bv/
and this:
div{
border: 2px solid;
text-align: left;
}
#container{
direction:rtl;
border: 0px;
}
#ad1, #ad2{
width: 30px;
height: 30px;
color: red;
vertical-align: top;
}
#img{
width: 100px;
height: 150px;
max-width: 100%;
color: purple;
display: inline-block;
}
#ad1{
display: inline-block;
}
<div id="container">
<div id="ad1">ad1</div>
<div id="img"> </div>
</div>
<div id="ad2">ad2</div>
http://jsfiddle.net/w7sknehL/
didn't help much since I could not position #ad2.
So, I don't ask to write any code. I'm just desperate for an advice.
If you don't need to support Android 2 and Opera Mini you can still use flexbox to achieve this result via media query. Example below:
.img {
width: 100%;
max-width: 100%;
height: 300px;
background: blue;
}
.ad {
background: red;
width: 100px;
height: 100px;
}
#media (min-width : 801px) {
.wrapper {
padding-right: 110px;
}
.img {
float: left;
}
.ad {
clear: right;
float: right;
margin-right: -110px;
margin-bottom: 10px;
}
}
#media (max-width : 800px) {
.wrapper {
display: flex;
flex-direction: column;
}
.img {
order: 2;
margin: 10px auto;
}
.ad {
margin: 0 auto;
}
.ad1 {
order: 1;
}
.ad2 {
order: 3;
}
}
<div class="wrapper">
<div class="img"> </div>
<div class="ad ad1">ad1</div>
<div class="ad ad2">ad2</div>
</div>
Also:
I didn't use browser prefixes for flexbox, so it will not work in all browsers. Add prefixes or use autoprefixer to make it work there.
Fix media query parameters for you needs, I only inserted width 800 as example value, real query to detect mobile will differ.
i want 3 columns with the same width.
i did succeed by use divs.
i made 2 divs in a div, then made another div in one of the two divs and then used css float left & right.
but was wondering if there was a different and better way? (no tables, i tried doing this without tables)
because i had trouble centering texts that were next to a image
and because i used float the white background disappears in the area where the columns were.
could someone help me either fix the problems i'm having or giving me a alternative method.
<div class="wrapper">
<div class="left"></div>
<div class="middle"></div>
<div class="right"></div>
</div>
.wrapper {
margin: 0 auto;
width: 450px;
}
.left {
float: left;
width: 150px;
background-color: red;
height:200px;
display:inline-block;
}
.middle {
background-color: yellow;
height:200px;
width: 150px;
display:inline-block;
}
.right {
float: right;
width: 150px;
background-color: blue;
height:200px;
display:inline-block;
}
I don't really get your question. But I make a solution. Here's my demo on Fiddle:
http://jsfiddle.net/asubanovsky/8d3m9/
HTML:
<div id='parent'>
<div id='first'>First</div>
<div id='second'>Second</div>
<div id='third'>Third</div>
</div>
CSS:
#parent{
width: 900px;
margin: 0 auto;
}
#first, #second, #third{
width: 300px;
float: left;
color: white;
text-align: center;
}
#first{
background-color: #222;
}
#second{
background-color: #444;
}
#third{
background-color: #666;
}
How to float two elements within a wrapper element to the right keeping the same order of the elements visually and semantically?
<style>
.container { widht: 200px; height: 50px; background: #333; }
.container p { width: 50px; height: 50px; background: #f00; float: right; margin: 0; }
</style>
<div class="container">
<p class="a">Simon</p>
<p class="b">Says</p>
</div>
When rendered, this will make the inner elements appear in the order of "Says Simon", http://jsbin.com/eravan/1/edit.
You can also use display: inline-block; instead of float while setting text-align: right; on the parent element.
http://jsbin.com/eravan/10/edit
The common fixes are:
Adding auxiliary element
<style>
.container { width: 200px; height: 50px; background: #333; }
.container p { width: 50px; height: 50px; background: #f00; float: left; margin: 0; }
.container .aux { float: right; }
</style>
<div class="container">
<div class="aux">
<p class="a">Simon</p>
<p class="b">Says</p>
</div>
</div>
http://jsbin.com/eravan/6/edit
The problem with this approach is the redundant auxiliary element itself.
Messing with the semantics
<style>
.container { width: 200px; height: 50px; background: #333; }
.container p { width: 50px; height: 50px; background: #f00; float: right; margin: 0; }
</style>
<div class="container">
<p class="b">Says</p>
<p class="a">Simon</p>
</div>
http://jsbin.com/eravan/9/edit
This is the worst solution and, unfortunately, the most common as well (Ali Bassam comment directly below proves it).
Neither of these is the correct answer.
There are lots of possibilities here with flexbox (including visually reordering elements), so the approach you would take depends on the surrounding content. However IE doesn't support it until version 10.
http://caniuse.com/#feat=flexbox
.container {
width: 200px;
height: 50px;
background: #333;
display: flex;
}
.container.a {
justify-content: flex-end;
}
.container p {
width: 50px;
height: 50px;
background: #f00;
margin: 0;
}
.container.b .a {
margin-left: auto;
}
<div class="container a">
<p class="a">Simon</p>
<p class="b">Says</p>
</div>
<hr />
<div class="container b">
<p class="c">Let's Play</p>
<p class="a">Simon</p>
<p class="b">Says</p>
</div>
http://jsfiddle.net/6NWmt/ (prefixes not included)
Another way to do this might be to make the two classes absolute and specify their location? If your elements are fixed size this would be relatively simple. Just a thought..