I'm working on designing up a table with 7 images in it that are all roughly the same size. Basically, I was wondering if there is a way (other then splitting each row into a different table) to change the HTML tendency to put everything in columns, and force it to lay it out based on rows.
Here is a jsfiddle of what it is. (I used Lorem Ipsum instead of the images) I would like the top and bottom row centered.
I know I can do this if I was to split it into three tables and set each one to have a width:xxxpx and margin: 0 auto, but would rather not do that.
Any suggestions are appreciated.
Why do you even bother creating multiple cells per row? Just put all your images that go in one row in the same cell, next to each other.
Yeah, it might be better to go with multiple divs for this issue. Is it possible to do something like the following:
HTML:
<div class="rows">
<div class="top">
<img></img>
<img></img>
</div>
<div class="middle">
<img></img>
<img></img>
<img></img>
</div>
<div class="bottom">
<img></img>
<img></img>
</div>
<div>
CSS:
.rows{
margin:10px;
}
.top, .bottom{
padding-left:85px;
padding-right:85px;
}
.top, .bottom, .middle
{
width:520px;
}
.rows img
{
margin: 10px;
width:150px;
}
Basically, let the normal flow of images control their positioning, and instead use margins and padding to equalize the spacing.
See the vertical-align property.
Related
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.
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 want to put the same div twice on the same row and cover all of its width and I need to put some space between them both.
The problem is when I use margin it will affect them both since they have same class so the second div will go below the other because the total width will become bigger than the container width.
I tried to use overflow:hidden or overflow-x:hidden with margin or change their size but nothing changed.(also I've tried to use borders with overflow hidden)
I am forced to use many div from the same class and I need them to cover all the width of the row.
Edit: the code is big so I will post a small example to explain my question
<div class="container">
<div class="block">content...</div>
<div class="block">content...</div>
</div>
<style>
.container{width:1000px; margin:0px auto;}
.block{width:480px;height:500px;float:left;}
</style>
I want to put first block + 40px space + second block
If you want the two .block divs on the same row what I would do is not do it in pixels but with %'s.
For example what I would do is this:
Give your div that you want on the right an id of right and the one that you want on the left an id of left:
<div class="container">
<div class="block" id="right">content...</div>
<div class="block" id="left">content...</div>
</div>
Then I would style it with
<style>
.container{width:1000px; margin:0px auto;}
.block{width:48%;height:500px;display:inline;}
#left{float:left;}
#right{float:right;}
</style>
You can play around with the exact width percent to get it to your standards.
You might want to make give them different class names or ids if you want to manipulate the two of them different.
<div class="container">
<div class="block1">content...</div>
<div class="block1">content...</div>
</div>
You can use inline display to make them appear in the same row.
.block1, block2 {
display: inline;
}
From there you can style them how you want by selecting either of those classes.
Could this be something like you're after?
http://jsfiddle.net/justin_thomas/9S46N/
The CSS:
.myRow {
width:48em;
}
.myclass {
padding: 1em;
margin-left:1em;
margin-right:1em;
float: left;
display:inline;
width: 20em;
}
The HTML:
<div class="myRow">
<div class="myClass">Blah... blah...</div>
<div class="myClass">Blah... blah...</div>
</div>
In there, i've used floats to get the desired effect. Unfortunately this means you have a hard time if you can't specify the actual width of the row's container in physical units (or one of its parents) and you also need to know whe number of columns there will be in this row to use as the width amount in the class with the divs.
I don't really like this as as solution as you need to make sure that the sum of each (div width + left-margin + right-margin) is never larger than the width of the row container.
Okay, so this is going to be hard to explain, so please ask questions if I am not clear
In my html page, I have a main "container" div that has multiple divs within it, but each of the divs inside the container are placed into one of two columns (so if there is a div in the container, it is either in the left column or the right column)
<div id="container">
<div id="column1">
<div id="item1-1"></div>
<div id="item1-2"></div>
<div id="item1-3"></div>
</div column1>
<div id="column2">
<div id="item2-1"></div>
<div id="item2-2"></div>
<div id="item2-3"></div>
</div column2>
</div container>
[NOTE: I know the syntax is incorrect, I am just making it easier to read]
So, in other words, I want two columns of divs that can vary in size (so the page size can vary), and so that item1-2 appears below item1-1, etc. The problem here is I want the divs in the container to appear inside of it, so I cannot use absolute or relative positioning. Something is telling me I should be using a table, but I am not sure how to go about doing this.
So, my question is: using only html and css, is there any to do exactly what is above?
First: make </div column1> and </div column2> just say </div>
Second: CSS:
#container {
width: 100%;
}
#column1, #column2 {
float: left;
width: 50%;
}
To achieve the look you want you should use CSS float property. However, to avoid problems with parent container not displaying correctly, consider following one of the two possible solutions:
Adding a div after floating elements with
clear: both
or applying code below to your parent div
overflow: hidden
So let's say I have 3 div's. I want them stacked in columns, next to each other. In the first columns, the first two div's fit. Now I want the third one to go next to the first one, since there is no room for the the third one to fit under the first two. How can this be done?
Currently, the only solid way to do this is to use CSS3's columns. See here for a reference: http://www.css3.info/preview/multi-column-layout/
This isn't widely supported yet (especially by IE), so you might need the jQuery plugin Columnizer to add more support:
http://dotmac.rationalmind.net/2011/03/cross-browser-multi-columns-with-jquery-and-css3/
CSS:
#wrapper{
width:960px;
margin:0 auto;
}
.mydivs{
float:left;
}
.cl{
clear:left;
}
Markup:
<div id='wrapper'>
<div class='mydivs'></div>
<div class='mydivs'></div>
<div class='mydivs'></div>
<div class='cl'></div>
</div>
float:left all your divs and they will be position as you want.( Aligned left and in next row if there's no space left)