I'm building a responsive site and having trouble with the floating container. I want it to have four divs directly next to each other with out gaps and without the divs moving onto a new on smaller screens/windows. I've tried a wide range of techniques none of which seem to work. The container should be a maximum of 960px x 460px as each of the divs all have the height of 460px and have a combine width total of 960px.
Try out the font-size hack: http://jsfiddle.net/andunai/bbek5rq6/
Or use Bootstrap.
The idea to remove spaces is to set font-size of those spaces to 0px.
You may want to use a grid framework to ease the development of responsive layouts:
http://getbootstrap.com/css/
http://960.gs/
http://unsemantic.com/
I am rather fond of the Jeet pre-processor framework which can be used with Stylus or SCSS.
Have you considered the super neat flex layout?
.wrap {
max-width: 960px;
height: 460px;
display: flex;
}
.wrap div {
flex: 1;
}
<div class="wrap">
<div style="background:red"></div>
<div style="background:blue"></div>
<div style="background:lime"></div>
<div style="background:cyan"></div>
</div>
I agree that using a framework will make your life easier. To answer your question,the simplest solution is to set a max width for the parent, and then use percentages for the children.
HTML
<div class="wrapper">
<div class="quarter red">
</div>
<div class="quarter green">
</div>
<div class="quarter blue">
</div>
<div class="quarter">
</div>
</div>
CSS
.wrapper {max-width:960px;}
.quarter {width:25%;height:460px;background:#EEE;float:left;}
.red {background:#990000;}
.green {background:#006600;}
.blue {background:#333366;}
You can view this code working here: http://codepen.io/anon/pen/KwdjXo
Updated codepen with placeholder images: http://codepen.io/anon/pen/LEGNYe
Related
In the picture is what I am trying to achieve.
When resized, inner elements should stay as they are:
This is what I tried:
<div style="width:100%;text-align:center;">
<div style="width:80%;margin-left:auto;margin-right:auto;">
<div style="float:left;">
</div>
<div style="float:left;">
</div>
<div style="float:left;">
</div>
<div style="float:left;">
</div>
<div style="float:left;">
</div>
...
<div>
</div>
But when I resize it, it get like 2 in a row, or 5 in a row, depending on how I resize the screen. Should be 3 all the time, centered. Width of inner elements not to be changed.
Add classes if you can. HTML:
<div class="one">
<div class="two">
<div class="three">
</div>
<div class="three">
</div>
<div class="three">
</div>
<div class="three">
</div>
<div class="three">
</div>
...
<div>
</div>
...and CSS:
<style>
.one {width:100%;text-align:center;}
.two {width:Npx;margin: 0 auto;"}
.three {width:31%;margin:1% 10px;height:100px;float:left;box-sizing:border-box;}
.two .three:nth-of-type(3n + 1) {clear:left}
</style>
the inner div's need a fixed width (here, 1% on right and left) for a total width of 33%. Fixing height makes this work for variable content, otherwise, it looks off. The "nth-of-type) selector is a failsafe in case you can't use a fixed height.
Elaborating on using a fixed height, if you decide to parse your output with javascript to hide certain elements, they will still be counted in the "nth-child" iterative loop, which would break your layout. Using a fixed height and exact percentage widths should almost always work.
You'll note that there's 1% left over, but it's small enough not to be an issue.
EDIT:
Edited to add box-sizing:border-box;. Setting the box-sizing to border-box will include any added padding or border thickness to size, because if you add padding without it, your layout will break.
EDIT 2:
Reviewing OP's question, there is a requirement for the inner content to maintain a fixed width. The only way to do that is to declare a fixed with for .two or .three. Declaring a fixed width for .three will not center the content without additional css manipulation, so add a fixed width to .two.
Please note that a fixed width is a terrible idea for rendering in mobile, if your application needs that. I would suggest using a media query as follows, and swapping to the more popular two column layout for mobile:
<style>
#media screen and (max-width: 768px) { /* or whatever width... */
.two {width:auto;margin:auto;}
.three {width:46%;margin:2% 10px;}
.two .three:nth-of-type(3n + 1) {clear:none} /*cancels above */
.two .three:nth-of-type(odd) {clear:left} /* every two, clear left */
}
</style>
This will get you on the right track....
I've got a red box and a green one, side-by-side, and centered. When the browser width is smaller than the width of the squares, they break into separate lines. How do I keep them together?
(I tried using a container div with their combined widths, which does the job in keeping them together, but they no longer are centered.)
Any suggestions?
The code:
<body>
<div style='text-align:center;font-size:0'>
<div style='display:inline-block;background-color:red;width:200px;height:50px'></div>
<div style='display:inline-block;background-color:green;width:200px;height:50px'></div>
</div>
</body>
You can run it here: https://plnkr.co/edit/2De21ziNmaeleFmkPuPF?p=preview
This can be done in many ways, here is 3:
Use min-width
<div style='text-align:center;font-size:0; min-width: 400px'>
<div style='display:inline-block;background-color:red;width:200px;height:50px'></div>
<div style='display:inline-block;background-color:green;width:200px;height:50px'></div>
</div>
Use white-space: nowrap
<div style='text-align:center;font-size:0; white-space: nowrap'>
<div style='display:inline-block;background-color:red;width:200px;height:50px'></div>
<div style='display:inline-block;background-color:green;width:200px;height:50px'></div>
</div>
Use display: flex;
<div style='text-align:center;font-size:0;display: flex;justify-content: center'>
<div style='display:inline-block;background-color:red;width:200px;height:50px'></div>
<div style='display:inline-block;background-color:green;width:200px;height:50px'></div>
</div>
Try using Flex-box
.parent{
display:flex;
border:1px solid green;
width:500px;
}
.parent div{
background:green;
width:100px;
height:100px;
margin:20px;
}
<div class="parent">
<div>cell1</div>
<div>cell2</div>
</div>
Hope this helps
If you give them a fixed width (ex 200+200px), when that div width is passed (ex mobile width of 375px < 400px of divs sum), the last element slide on the next row.
With width of 35% for each other, will look exactly as you want it for that 200px.
<body>
<div style='text-align:center;font-size:0; width: 100%;'>
<div style='display:inline-block;background-color:red; width:35%;height:50px'></div>
<div style='display:inline-block;background-color:green; width:35%;height:50px'></div>
</div>
</body>
Here is the link to your code
EDIT:
Here is a usefull link for understanding better the width options depends of the width of device, and I encourage you to take a deeply look inside of w3schools, or other platforms where you can learn better how to manipulate elements of html, with css and js.
screen-width
Try using width: 50% on the boxes instead of width: 200px.
I have more than 6 divs and I want to set it with float left and one after another with auto resize as per the content size using css
As per image below
here is my code:
<div class="main-container">
<div class="container">
<div class="title">test1</div>
<div class="content">Testing of css html Long Content</div>
</div>
<div class="container">
<div class="title">test2</div>
<div class="content">Testing of css html Long Content</div>
</div>
<div class="container">
<div class="title">test3</div>
<div class="content">Testing of css html Short Content</div>
</div> <!-- And so on ... -->
</div>
any help will be appriciate. Thanks
You should use JQuery plugins like wookmark or masonry for what is you expected output. Using CSS you can not fill upper space.
You can also try http://suprb.com/apps/gridalicious/ which is very good using JQuery.
From all I know, you cannot achieve that using CSS only. The following CSS solutions are possible, but each of them fails to meet all your requirements.
float: left; with clearing
This is all you can achieve using float:
For that to work, you have to clear the float every 4th element. Recommendation is to use
.container:nth-of-type(3n+1) { clear: both; }
display: flex;
What you can achieve using display: flex; is similar, but all .container in one "row" will have the same height which will be determined by the "highest" .container.
CSS columns
The only way I know of to create a type of layout like you showed is using css colums. This does have the massive drawback that your containers will be stacked first in vertical order, and only if a column is filled the next .container will be pushed to the next column. So 2 will be below 1, not right of it.
Javascript-based solutions
As mentioned in another answer, there's a load of solutions available based on Javascript.
Find the two mentioned before here:
http://masonry.desandro.com/
http://www.wookmark.com/jquery-plugin
Add this style:
<style>
.main-container{
border:solid green 1px;
width: 500px;
height:200px;
}
.container{
border:solid gray 1px;
width:50px;
height:auto;
float:left;
}
</style>
By using height /width = auto can make your div flexible to its content as per your hint
hope this help.
I'll start off by stating that I know this question has been asked a lot, but none of the answers I saw seemed to work for me.
Basically, I have some divs inside of a larger div. They'll have dynamic text, so I don't know how many lines each will be. The problem is that I can't seem to get the divs to size themselves to the parent's height. I want the column divs to take up the entire height of the row div (basically, I want that blue part to fill all the space between the bars).
HTML:
<div class="container">
<div class="row divOne">
<div class="col-xs-3 divTwo">Some Text</div>
<div class="col-xs-3">
Some text that could wrap to multiple lines
</div>
</div>
<div class="row divOne">
<div class="col-xs-3 divTwo">Different Text</div>
<div class="col-xs-3 divThree">
With some more text
</div>
</div>
</div>
CSS:
.divOne
{
border-top:10px solid black;
}
.divTwo
{
background-color: #32649b;
height:100%;
color:white;
}
jsfiddle:
Now, what I've learned from other versions of this question are that
float:left might be screwing it up
height:100% doesn't work if the parent's height is defined
position:relative might help on the parent
The problem with the float is that I'm using bootstrap, and that's where the float is coming from, so I don't really want to mess with that.
I can't really define parent height, because it'll be dynamic based on the children.
I also tried messing around with position:relative on the parent and absolute on the child, but that seemed to get really screwy. I'm also guessing this won't work because I'm using bootstrap. It's possible that I'm just missing something, though. I'll admit to not being the greatest with CSS.
I don't know if I'm having these issues because I'm using bootstrap, or because I'm just being an idiot right now.
Something else that seems to be throwing a wrench into things: These columns will be laid out differently on smaller screens vs. larger ones. I actually want something along the lines of col-xs-12 col-md-3 for these.
The short answer is that you can't really achieve this within the constraints of the bootstrap framework. There are plenty of articles that explain why div elements can't stretch to the height of their container, and how to get around this problem. One of the solutions I'm most fond of is Faux Columns.
But, let's get a little more creative then that.
I came up with something that might work for your scenario, but requires a bit of change to your markup. Here's a solution that wraps the bootstrap grid with display: table.
http://jsfiddle.net/Wexcode/13Lfqmjo/
HTML:
<div class="table-container">
<div class="table-row divOne">
<div class="col-xs-3 divTwo">Some Text</div>
<div class="col-xs-3">
Some text that could wrap to multiple lines
</div>
<div class="col-xs-6"></div>
</div>
</div>
CSS:
.table-container {
margin: 0 -15px;
}
.table-row {
display: table;
width: 100%;
}
.table-row [class^="col"] {
display: table-cell;
padding: 0 15px;
float: none;
}
Note that for this solution to work, you must include enough col elements to stretch it all 12 columns (see that I added an empty .col-xs-6 div).
You can add
display:flex;
to divOne , and will act like you wanted.
in bootstrap 4 'row' class applies this on div, but in ealier versions you need to add manually if you expect such behavior.
Give .divOne a display: flex and remove the height: 100% from .divTwo:
.divOne
{
border-top:10px solid black;
display: flex;
}
.divTwo
{
background-color: #32649b;
/*height:100%;*/
color:white;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row divOne">
<div class="col-xs-3 divTwo">Some Text</div>
<div class="col-xs-3">
Some text that could wrap to multiple lines
</div>
</div>
<div class="row divOne">
<div class="col-xs-3 divTwo">Different Text</div>
<div class="col-xs-3 divThree">
With some more text
</div>
</div>
</div>
I am trying to create a 4 column <div> layout.
Why are the row containers not drawing a border around the respective row?
Also, is this a good approach, as in is my css written well to be fluid and for dynamic resizing of the browser window?
Any suggestions or help would be most appreciated.
Here is my current attempt.
You need to set the overflow to auto when using float. http://jsfiddle.net/gJJHs/
The problem seems to be that you are floating your columns, and when you float things, they take up effectively zero space.
I think the solution is to cancel the float in you "last" class and add a "dummy column" to each row.
This CSS seems to work:
.col
{
float: left;
width: 25%;
}
.last{
clear: left;
}
.row{
border: 1px solid green;
}
Revised HTML (with dummy last column):
<div class="row">
<div class="col">1</div>
<div class="col">2</div>
<div class="col">3</div>
<div class="col">4</div>
<div class="last" />
</div>
<div class="row">
<div class="col">5</div>
<div class="col">6</div>
<div class="col">7</div>
<div class="col">8</div>
<div class="last" />
</div>
When an element is floated, its parent no longer contains it because the float is removed from the flow. The floated element is out of the natural flow, so all block elements will render as if the floated element is not even there, so a parent container will not fully expand to hold the floated child element.
As such, the border will seem like it is not bordering anything :( Take a look at the following article to get a better idea of how the CSS Float property works:
The Mystery Of The CSS Float Property
As others have said, if you add overflow: auto; to your .row class, it'll take care of the problem. Here's another article that explains why to use overflow.
http://www.quirksmode.org/css/clearing.html
I hope this helps.
Hristo
it's the float left. That takes the divs "out of flow" and it's drawing the border around empty space essentially
Yet another option, in addition to the other answers, is to add overflow: hidden; to your .row.
The reason for the behavior you saw is that float takes the div outside of the normal flow. The div then essentially takes up no space in the document.
This makes sense if you think about the ostensible purpose of floating an image in order to wrap text around it. The next p tag (for example) is positioned as if the floated image wasn't there, i.e. overlapping the image. Then, the browser wraps the text within the 'p' tag around the image. (If the floated image was not "removed from the flow", the p tag would naturally appear below the image—not giving the desired effect.)
Here's how I'd write the code.
HTML:
<div class="row">
<div class="col">1</div>
<div class="col">2</div>
<div class="col">3</div>
<div class="col">4</div>
</div>
<div class="row">
<div class="col">5</div>
<div class="col">6</div>
<div class="col">7</div>
<div class="last">8</div>
</div>
CSS:
.col
{
float: left;
width: 25%;
}
.row{
border: 1px solid green;
overflow: hidden; /* "overflow: auto;" works just as well instead */
width:100%; /* Helps older versions of IE */
}
Add a "float:none;clear:both" to your .row and you'll see the rows appropriately. But for the fluid behavior and design that you are looking for, you'll want to apply some javascript (like jQuery Equal Height: http://www.jainaewen.com/files/javascript/jquery/equal-height-columns/) to be consistent across browsers without a ton of CSS hacking.