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.
Related
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.
This question already has an answer here:
Clearing floats dynamically with CSS
(1 answer)
Closed 8 years ago.
I am trying to create an efficient, clean layout for an e-commerce site. This site is being built in-house for my client, I am in charge only of the CSS and basic structure.
I would like to figure out the best STRUCTURAL way to clear every third box in a row. When the boxes are all the same size they float naturally in a grid, but when one of them changes size based on content (this will be common on the site) the boxes shift improperly and break the layout.
I considered/tried two options:
I can manually place a div container, with "clear" styles after every third box.
I can wrap the boxes in groups of 3, and use element:after to place a clear in this container, which would effectively clear the 3 boxes in the row.
Is one of these options better than the other? I know that the "clear" div is not preferable, but is creating a new container to wrap around the 3 boxes that much better? Either way I am still adding a new HTML element to the page.
Is there another option that I am missing? I know it's possible to do either of these options dynamically, but I want to make sure that I choose the more efficient option for this project. That is, I don't have to worry about how the code will be functionally written, I just need to figure out how the final structure will look.
I'm not experienced with this kind of layout and I don't know if there might be things that I haven't discovered yet, as for how to do this.
If I understand right, you want every third item to have clear: both;
Lets assume these items are div's. All of which are inside <div id="container"></div>.
Now, I would do the following:
#container div:nth-child(3n+1) {
clear: both;
}
You can use the :nth-child() CSS pseudo class to achieve this.
More info here: https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child
Example:
div:nth-child(3n) {
clear:right;
}
Depending on the support that you need to provide, you could use the CSS3 nth-child selector.
div:nth-child(3n) {
clear: right;
}
Or something similar depending on how everything else is setup.
You can accomplish this by using the pseudo element :nth-child()
#element:nth-child(3n) {
clear:both;
}
Where n starts at 0 and goes up by one for each of that element type
Here's an overall look at :nth-child()
http://www.w3schools.com/cssref/sel_nth-child.asp
Assuming your top level wrapper has a fixed width in which you would like to fit the rows of 3 boxes each, the best solution is to put a row-container div with clear:both css styling as in the code below
<html>
<body>
<style>
#box_wrapper{
max-width:200px;
border: 2px blue solid;
}
.row_container{
clear:both;
border: 1px yellow solid;
}
.box{
width:50px;
height:50px;
float:left;
border: 1px red dotted;
}
</style>
<div id="box_wrapper" width="200" height="200">
<div class="row_container">
<div class="box" id="box_1"></div>
<div class="box" id="box_2"></div>
<div class="box" id="box_3"></div>
</div>
<div class="row_container">
<div class="box" id="box_4"></div>
<div class="box" id="box_5"></div>
<div class="box" id="box_6"></div>
</div>
<div class="row_container">
<div class="box" id="box_7"></div>
<div class="box" id="box_8"></div>
<div class="box" id="box_9"></div>
</div>
</div>
</body>
</html>
I have 3 scripts in my HTML file and I'm having trouble with positioning.
As you can see my vertical gauge is on top on my second circular gauge.
I tried multiple positioning options but I'm not able to fix this.
How can I make my vertical gauge be on the right side of my first circular gauge?
This is how my code looks at the moment.
<body>
<div id="containerTno" style="height:300px;width:800px;margin:0px;position:static">
<div id="circularGaugeContainer" style="height:300px;width:300px;position:relative"></div>
<div id="linearGaugeContainer" style="height:300px;width:300px;position:relative"></div>
</div>
<div id="circularGaugeContainer2" style="height:300px;width:300px;margin:0px; position:static"></div>
</body>
For expected layout try assigning following css for the first container as
width:60%
and second container as
width: 30-40%; float: right;
and display as
display: inline-block
for both the container
I believe if you use this two lines instead it should work
<div id="circularGaugeContainer" style="height:300px;width:300px; float: left;"></div>
<div id="linearGaugeContainer" style="height:300px;width:300px; float: right;"></div>
I didn't use JFiddler but I'm quite sure this works. let us know its an easy fix
In my web application screens I have many areas which has the same width and different heights.
For eg. I have six divs:
<div style="height: 50px">1</div>
<div style="height:150px">2</div>
<div style="height:250px">3</div>
<div style="height:130px">4</div>
<div style="height:120px">5</div>
<div style="height: 30px">6</div>
and the css:
div{
border:1px solid red;
float:left;
width:100px;
}
browsers displays it like this:
If the browser window is changed to smaller width divs are automatically wrapped.
Wrapped divs are aligned according the top div which has maximum height. Needlessly
empty spaces appears on the screen:
Is there a way to arrange all wrapped divs to top?
Try this...
http://masonry.desandro.com//
It might be a little flashier than what you want/need. But there isn't a CSS option to fix this.
I don't know of any way to do this in CSS. The jQuery Masonry plugin should give you the ability to do this if you're not opposed to using JavaScript.
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.