I have a fluid layout made with collapsible divs. When they collapse, they leave an empty space underneath, which is automatically filled by the next div (they all have float: left). This however does not look good and I would like to maintain the "row structure" without loosing the ability to move the divs around (when the window gets smaller). JSFiddle here.
CSS snippet:
.clickable {
border: 1px dotted black;
width: 200px;
float: left;
height:50px;
margin-right:20px;
margin-bottom:20px;
}
HTML snippet:
<html>
<head><title>Layout test</title></head>
<body>
<div class="clickable"> 1 </div>
<div class="clickable"> 2 </div>
<div class="clickable"> 3 </div>
<div class="clickable"> 4 </div>
<div class="clickable"> 5 </div>
<div class="clickable"> 6 </div>
</body>
<html>
Is there a pure CSS solution? I would like not to mess with JavaScript. I know I can dynamically determine the number of columns and then wrap them into "rows", but I'm not willing to use this solution yet.
Change your float: left to display: inline-block. That's the only change I made to your fiddle, and seems to give the effect you're looking for.
http://jsfiddle.net/GLf7m/2/
Related
This question already has answers here:
How to make a stable two column layout in HTML/CSS
(6 answers)
Closed 4 months ago.
I'm trying to make a simple two-column layout in HTML/CSS; after consulting some resources, I'm still getting the two divs that should be side-by-side rendering as one below the other.
<div id="columns" style="width: 100%;">
<div id="left" style="float: left; width: 60%;">
<button id="testBtn">show</button>
<div id="output" style="white-space: pre-line">
Content goes here
</div>
<div>
<div id="right" style="float: left; width: 40%;">
<div id="input">
input displayed here
</div>
</div>
</div>
These are some of the links I've consulted:
Simple two column html layout without using tables
https://www.w3schools.com/howto/howto_css_two_columns.asp
I've tried several variations, but so far I'm not getting a two-column layout. When I set the "input" div to "float:right", it appeared indented to the right but was still below the "output" div instead of beside it. Am I missing something?
Your HTML is invalid. Instead of a closing </div> tag for #left, you have an opening <div> tag.
Try this:
<div id="left" style="float: left; width: 60%;">
/* content goes here... */
</div>
Here is a fiddle demonstrating the modified markup: https://jsfiddle.net/djc87tLc/
Add display:inline-block; box-sizing:border-box; in both the divs and it will work.
display:inline-block;
This will keep the elements inline and box-sizing:border-box; will keep the element's width to your defined width by including any padding or border inside it.
Hope this helps.
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 have some divs which don't behave like I wish.
<div class="list-product-with-border">
<div style="width:80px; display:inline-block;">img</div>
<div style="display:inline-block;"><b>Productname</b></div>
<div style="float:right; width:80px;">
<div>
<button id="editBtn">Edit</button>
</div>
<div>
<button id="removeBtn">Remove</button>
</div>
</div>
</div>
JSFiddle link
Two problems here:
the bordered divs is not high enough: the 'remove' button is not visually in the bordered div
When the 'product name' is longer, the buttons are rendered under the div with the product name. I would like the product name to be over multiple lines when this happens. The three divs should always be next to eachother.
The first and last div has a fixed width, the middle div (product name) should stretch with the size of the bordered div
Personally I'd use a table for this. Each row of the table is an item, and you have a column of images, a column of names, and a column of actions. Is this any different to the tables used for invoices?
I can't quite get the effect you want, but improvements can be made: a floated element should come before the elements that are to go around it - so in this case, it should be the first thing inside the list-product-with-border container. Also, you should either have an element with clear:both at the end of the container, or set the container to have overflow:hidden to force the floated element to be inside.
Do you want it like this?
Here's the Fiddle
<style>
.list-product-with-border {
padding:3px;
width:60%;
border:1px solid black;
overflow: hidden;
height: auto;
}
</style>
And now the HTML
<div class="list-product-with-border">
<div style="width:80px; display:inline-block;">img</div>
<div style="display:inline-block; overflow:hidden; height: auto;"><b>Productname Is the right choice baby, as you can see its just done</b></div>
<div style="float:right; width:180px;margin-top: 10px;">
<div style="float: left;">
<button id="editBtn">Edit</button>
</div>
<div style="float: left;">
<button id="removeBtn">Remove</button>
</div>
</div>
</div>
</div>
You must use display:table-cell instead of display:table-column and remove float:left for .divCell.
And add this style:
.headRow{
display:table-row;
}
I'm starting to use Bootstrap 3 and it seems like you use it to define and over all structure but there are probably going to be a lot of containers that get your own custom classes?
I have a container which I've changed the definition of to be fluid so it's now:
.fluid-container {
padding-left: 15px;
padding-right: 15px;
margin-left: auto;
margin-right: auto;
min-width:500px;
}
but when it comes to the rows and sizing them I'm running into some problems here and I'm not sure if it's solved with my own custom classes or leveraging bootstrap in a way I don't know about.
The .fluid-container is going to be a header in this case and inside of it I have a container I'd like to be on the left, and then another container that will be on the right. Normally I'd just make two containers, float one left, the other right and then put a min width on the parent container.
In bootstrap what I've done is this (fiddle here http://jsfiddle.net/hg84F/2/):
<div class="lp">
<div class="lp-shell-head lp-fluid-container" style="border:1px solid red;">
<div class="row">
<div class="col-sm-2" style="border:1px solid blue;">left</div>
<div class="col-sm-2 col-sm-offset-8" style="border:1px solid green;">right</div>
</div>
</div>
</div>
The problem with this is when I make the page width smaller the two containers eventually become full width and stack on top of each other. What I want to have happen is have them stay on their respective sides no matter what and I wasn't sure how to make them do this. Any ideas of how to use bootstrap in this way?
What I want to have happen is have them stay on their respective sides no matter what and I wasn't sure how to make them do this. Any ideas of how to use bootstrap in this way?
http://getbootstrap.com/css/#grid -- More on Bootstrap grid.
<div class="row">
<div class="col-xs-2" style="border:1px solid blue;">left</div>
<div class="col-xs-2 col-xs-offset-8" style="border:1px solid green;">right</div>
</div>
All you're missing, based on your question is the Extra Small (always responsive) column class, which is col-xs-*
So this is a slightly different approach to your question. Based on your questions and comments to JonathanR's answer, I figured you need a little tweak.
Jonathan's solution is valid, but I'm really unsure of how far you want to "squeeze" the page before the "left" and "right" actually touch. Bootstrap uses percentage based widths and margins for the "col-" and "offset-" elements. If you attempt to squeeze it past a certain point, you will begin to see the horizontal scroll. This example solves that issue in a different manner.
Here's my working example: http://bootply.com/101136
<!-- 'Container-fluid' class no longer exists in 3.0, but I use it as a semantic wrapper class -->
<div class="container-fluid">
<!-- Make sure you use include the bootstap 'container' class -->
<div class="lp-shell-head lp-fluid-container container" style="border:1px solid red;">
<div class="row">
<!-- Use one XS col instead of 2 col-xs-2 and the offset -->
<div class="col-xs-12">
<!-- Use two div elements and float them left/right -->
<div class="pull-left" style="border:1px solid blue;">left</div>
<div class="pull-right" style="border:1px solid green;">right</div>
</div>
</div>
</div>
</div>
Minor change in the CSS. Switched your "min-width" to "max-width" in order to prevent your row from expanding past the 500px threshold.
.container-fluid {
border:1px solid purple;
}
.lp-fluid-container {
padding-left: 15px;
padding-right: 15px;
margin-left: auto;
margin-right: auto;
/* Switched to 'max-width' */
max-width:500px;
}
I don't know much about html or css but I have done this much;
I want to stack divs so it looks like this (please excuse the bad drawing) ;
I have googled how to and tried different thing but the likes/dislikes boxes always end up not moving or move to the very left/very right.
<div style="float:left;width:300px;height:350px;text-align:center;">
<div style="float:left;width:500px;height:200px;text-align:center;">
<div id="wrapper">
<div style="align=center;">
<div id="first">1</div>
<div id="second">2</div>
These are th three divs I have.
First one has links [the add/message etc]
Second one has "thelastgecko" and profile text.
And I am trying to use the last box for likes/dislikes but whatever im doing it isn't working.
You usually use one "huge" div, set it below 1024 pixels wide so old screens can view it and then you usually center it in the middle of the screen. Then inside of that big div you put the "add me - message me - gallery" with a "float:left" or "position:absolute" I prefer the latter. then you make another div containing the "The last gecko" + dislikes & likes and center that div, then after that I would make another div and either do a "float:right" or a "position:absolute; left:'huge width minus this ones width".
I did write everything in text and readable since giving the code away doesn't teach as well.
But in case you still didn't get it, here's my idea:
<html>
<head>
<style>
body{margin:0px;padding:0px;width:100%;height:100%;}
#container{width:900px;margin:auto;margin-top:200px;}
#add_me,#dislike_text{position:absolute;width:200px;background-color:#ace;}
#last_gecko,#holder{margin:auto;width:500px;background-color:#eca;}
#likes,#dislikes{float:left;width:250px;display:block;background-color:#cae;}
#dislikes{background-color:#cea;}
#dislike_text{margin-left:700px;background-color:#eac;}
</style>
</head>
<body>
<div id="container">
<div id="add_me">add me<br>message me<br>wuts going on</div>
<div id="dislike_text">dislike text</div>
<div id="last_gecko">
Last Gecko
<div id="holder">
<div id="dislikes">dislikes</div>
<div id="likes">likes</div>
</div>
</div>
</div>
</body>
</html>
Made it workable, it will at least show you in what direction to move, It might not be the best way but it is my way.
You could do something like this: http://jsfiddle.net/jAKgd/
CSS
#wrapper {
width: 800px;
}
#leftColumn {
float: left;
height: 800px;
width: 200px;
margin-right: 5px;
}
#leftColumn a {
display: block;
}
#rightColumn {
width: 100%;
}
#contentDislike,
#contentLike {
display: inline-block;
width: 250px;
}
Obviously the height/widths can be changed to meet your needs. I was just doing a quick example.
HTML
<div id="wrapper">
<div id="leftColumn"> Link
Link
Link
Link
Link
</div>
<div id="rightColumn">
<div id="contentTop">
<img src="/images/image_name.jpg" alt="image text here" />
<p>THIS IS WHERE YOUR PROFILE TEXT WOULD SHOW. IT CAN EXPAND HEIGHT AS NEEDED.</p>
</div>
<div>
<div id="contentDislike">DISLIKE CONTENT HERE</div>
<div id="contentLike">LIKE CONTENT HERE</div>
</div>
<div>YOUR LOWER TWO COLUMNS WILL GO IN THIS DIV</div>
</div>
</div>
It's a bad way of design to use floats to place divs at some place.
It's a much better way to use, for example, a flex layout.
But this is not supported by all browsers (But nearly. If you can, take this option).
Another solution is this one:
Use the width option. You set the width of any div of your html to a fixed number, in percent, of course. Watch this example
But if you do this, you will have to pay attention for very large and very little screens, I think you would have to write alternative css style sheets which are working with (max-width) and (min-width).
And there is another solution: the gridlayout. It is part of the standards since 2013 (I think) but it's not well supported yet. But maybe in future.
Hope I could help