I am trying to do a grid of products using list items and inline-block. The problem is: the content of the blocks have variable heights and the inline-block doesn't keep the heights equal.
The code:
#blocks ul{
list-style-type:none;
margin:0px;
padding:0px;
}
#blocks li {
display:inline-block;
vertical-align:top;
width:280px;
background-color:#ff9933;
padding:13px;
margin: 0px 0px 20px 19px;
}
<div id="blocks">
<ul>
<li>...</li>
<li>...</li>
<li>...</li>
</ul>
</div>
Here's an image to illustrate the issue.
I need the blocks to keep the same height of the larger blocks, independently of its content. Is it possible to make someting like this?
And finally: Sorry, english is not my mother language :)
1. Adding the following to the li CSS will mimic the image example you provided.
height: 150px;
min-height: 150px;
overflow:auto;
2. Also, here are some other approaches:
http://demo.smartnetzone.com/same-height-columns-using-jquery/
http://buildinternet.com/2009/07/four-methods-to-create-equal-height-columns/
http://www.cssnewbie.com/equalheights-jquery-plugin/
There's a W3C candidate layout called "flexbox" that takes care of this problem and many others. To achieve the equal height boxes you would simply assign the property display: flex to the UL and display: block to the LIs inside it.
Example (CodePen)
It's not going to get you very far if you need to support older browsers :) but if you can get around that this method is easy and super cool.
Reference: A Complete Guide to Flexbox
I don't think there is a way, barring javascript, to do this; my recommendation would be to set a defined height and maybe an overflow:auto so in the case that content does overflow it does not cripple your site and your readers can still see your content.
First, if you adjust your margin to be on all 4 sides it will space out a little better on the flow to new line.
Second, you can either specify a min-height that is closer to something common for all areas, or run JavaScript to set them to the same on a line given a particular width.
When you have more divs and thus more rows, without row-divs (container divs that mark a row), then the following example from CSS Tricks does what you need:
Equal Height Blocks in Rows
The following code has eight list items. When only three or four items are displayed per role, then the given example will make all divs equal in height per row.
<div id="blocks">
<ul>
<li>...</li>
<li>...</li>
<li>...</li>
<li>...</li>
<li>...</li>
<li>...</li>
<li>...</li>
<li>...</li>
</ul>
</div>
Related
So I read the solutions regarding making the spacing go away when using inline-block as opposed to floats: display: inline-block extra margin and http://css-tricks.com/fighting-the-space-between-inline-block-elements/.
So if you're using haml and want to put the closing tag on the same line as the next opening tag, is there is a solution besides switching to ERB?
(and no, I don't want to mess with a css property of the parent container and have to override that in all the child elements).
This breaks (has spacing between the anchors).
So is it true that in spite of the recommendations to do such layouts using inline-block as opposed to floats, it seems that floats are still the way to go, especially when using haml?
CSS
nav a {
display: inline-block;
padding: 5px;
background: red;
}
HTML
<nav>
One
Two
Three
</nav>
Workaround (css-tricks one):
<ul>
<li>
one</li><li>
two</li><li>
three</li>
</ul>
or
<ul>
<li>one</li
><li>two</li
><li>three</li>
</ul>
another one:
<ul>
<li>one</li><!--
--><li>two</li><!--
--><li>three</li>
</ul>
I found the answer: http://haml.info/docs/yardoc/file.REFERENCE.html#whitespace_removal__and_
(this is a super useful article on the topic: http://designshack.net/articles/css/whats-the-deal-with-display-inline-block/)
Here's a codepen to experiment: http://cdpn.io/Bjblr
And this worked:
Here's the html if the anchor text is on the same line (same result, but harder to read source html:
<style>
ul{margin:0px;padding:0px;}
ul li{margin:0px 5px 5px 0px;padding:0px;list-style-type:none;float:left;}
</style>
<ul class="clearfix">
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
</ul>
The first li contains more content than the rest.
So, I have the following problem:
problem http://img830.imageshack.us/img830/240/problemc.png
But how do I move the next row down, so it looks like that:
want this http://img440.imageshack.us/img440/9750/solutionm.png
I tried using display:inline-block; instead of float:left; for the lis, which works, but I'd still rather use float:left; over inline-block.
Any ideas on how to do this?
Solution for IE:
http://blog.mozilla.com/webdev/2009/02/20/cross-browser-inline-block/
The best solution is to use a little-known display style called table-cell.
I've had to do this a few times. Here's how you do it:
/* -*- CSS -*- */
ul li .wrapper
{
display:table-cell;
width:100px; /*replace here*/
min-height:100px;/* " " */
}
ul li
{
float:left;
display:inline-block;
}
ul
{
display:table;
}
...
<!-- HTML -->
<ul>
<li><div class="wrapper">my-content</div></li>
<li><div class="wrapper">my-content</div></li>
<li><div class="wrapper">my-content</div></li>
<li><div class="wrapper">my-content</div></li>
</ul>
How this works:
When the parser sees that there's a UL object, it treats it like a table instead of a list. This gives you the distinct advantage that you're beginning to /act/ like you're working with tables (but you're not!)
The rule then runs against the wrapper class -- this creates a "Table cell". We don't want to put it in the li because OTHERWISE the li will act as the table cell. This is kinda bad. the work around is that your li is actually aligned left. There's some argument whether or not is a good idea to do it this way -- this is the "Most Effective" because it forces the box model to comply. Its fugly, I know.
the REASON its bad for the li to be treated like a table-cell is that it won't wrap. The reason it wont wrap is that table-cells aren't supposed to wrap.
There is ONE other solution that might work, however I haven't tested it.
/* -*- CSS -*- */
ul li { display: inline-block; float:left; min-height:200px;width:200px; }
Its not as ugly, but it should work by making the box model force the alignment as well.
First of all: Are you sure you're using the right markup? A list generally doesn't end up to look like that.
Second. Do you know how many items you will have on a row? In your image they seem to have the same width. If you know that you can add clear:both; to the forth li (and other you may need) and force it down. This would be the only way to do it with left floating lis.
You can't do this using only float:left; the blocks just fall into place where they fit as your first example shows. If you intend for your content to always display in three columns, you could programmatically clear the float on the first item in each row.
Simple question - what part of my CSS do I tweak to adjust the gap between a bullet/number and the first text character in an HTML list?
Bonus question - I've seen it mentioned here that controlling table spacing by adjust padding on table tr td {} is bad practice, but I haven't seen someone explain how you're really supposed to do it...?
margin and padding should do it.
i see no reason why you can't have padding on a td. i do it and it works well. i think what people are moving towards now is a model of using divs and placing them like tables using css.
<html>
<style>
ul {}
li { padding:0 0 0 30px ;}
</style>
<body>
<ul>
<li>one</li>
<li>two</li>
</ul>
</body>
</html>
Greetings,
I'm trying to create a pagination panel for one of my lists and want to make it centered. Currently it looks like:
<div class="panel">
<div class="page">1</div>
<div class="page">2</div>
<div class="page">3</div>
</div>
So I'm basically trying to make all of the "page" div elements go to the center of "panel" container, like this:
_____________________________
| 1 2 3 |
------------------------------
Is there a way to implement that without knowing the width that "page" elements need (there could be 3 or 9 pages and both situations should be handled properly).
Thanks in advance.
Is there any reason you want the pages to be <div>s? If you make them a <span class='page'> (which is more semantically correct imho) and apply text-align: center; to the panel you get the effect you want. Otherwise you could do display: inline; on the pages, but for that you might as well go to <span>
do you have to use divs for the numbers?
i would replace those divs with spans instead and then apply a text-align:center to the outter div (.panel)
As this is a list of numbers, you shoud consider placing them in a list to be semantically correct. Shove them into a UL, style that with CSS and you're golden.
Like so perhaps:
<div class="panel">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
And style in CSS as this:
.panel{text-align:center; }
.panel ul{list-style-type:none; margin:0 auto; padding:0; overflow:hidden; }
.panel li{display:inline; }
.panel li a{padding:5px; margin:0;}
Play around with the padding and margins. Always a good idea to add some fatness to your links when they're used in pagination, tabs and menus.
Tested in Opera 9, FF3, IE6, Chrome
I'm trying to place this menu on the left hand side of the page:
<div class="left-menu" style="left: 123px; top: 355px">
<ul>
<li> Categories </li>
<li> Weapons </li>
<li> Armor </li>
<li> Manuals </li>
<li> Sustenance </li>
<li> Test </li>
</ul>
</div>
The problem is that if I use absolute or fixed values, different screen sizes will render the navigation bar differently. I also have a second div that contains all the main content which also needs to be moved to the right, so far I'm using relative values which seems to work no matter the screen size.
float is indeed the right property to achieve this. However, the example given by bmatthews68 can be improved. The most important thing about floating boxes is that they must specify an explicit width. This can be rather inconvenient but this is the way CSS works. However, notice that px is a unit of measure that has no place in the world of HTML/CSS, at least not to specify widths.
Always resort to measures that will work with different font sizes, i.e. either use em or %. Now, if the menu is implemented as a floating body, then this means that the main content floats “around” it. If the main content is higher than the menu, this might not be what you want:
float1 http://page.mi.fu-berlin.de/krudolph/stuff/float1.png
<div style="width: 10em; float: left;">Left</div>
<div>Right, spanning<br/> multiple lines</div>
You can correct this behaviour by giving the main content a margin-left equal to the width of the menu:
float2 http://page.mi.fu-berlin.de/krudolph/stuff/float2.png
<div style="width: 10em; float: left;">Left</div>
<div style="margin-left: 10em;">Right, spanning<br/> multiple lines</div>
In most cases you also want to give the main content a padding-left so it doesn't “stick” to the menu too closely.
By the way, it's trivial to change the above so that the menu is on the right side instead of the left: simply change every occurrence of the word “left” to “right”.
Ah, one last thing. If the menu's content is higher than the main content, it will render oddly because float does some odd things. In that case, you will have to clear the box that comes below the floating body, as in bmatthews68's example.
/EDIT: Damn, HTML doesn't work the way the preview showed it. Well, I've included pictures instead.
I think you're supposed to use the float property for positioning things like that. You can read about it here.
All the answers saying to use floats (with explicit widths) are correct. But to answer the original question, what is the best way to position a <div>? It depends.
CSS is highly contextual, and the flow of a page is dependent on the structure of your HTML. Normal flow is how elements, and their children, will layout top to bottom (for block elements) and left to right (for inline elements) inside their containing block (usually the parent). This is how the majority of your layout should work. You will tend to rely on width, margin, and padding to define the spacing and layout of the elements to the other elements around it (be they <div>, <ul>, <p>, or otherwise, HTML is mostly semantic at this point).
Using styles like float or absolute or relative positioning can help you achieve very specific goals of your layout, but it's important to know how to use them. As has been explained, float is generally used to place block elements next to each other, and it really good for multi-column layouts.
I won't go into more details here, but you might want to check out the following:
SitePoint CSS References - probably the most straightforward and complete CSS reference I've found online.
W3C CSS2.1 Visual Formatting Model - Yes, its a tough read, but it does explain everything.
You should use the float and clear CSS attributes to get the desired effect.
First I defined styles for the called left and right for the two columns in my layout and a style called clearer used to reset the page flow.
<style type="text/css">
.left {
float: left;
width: 200px;
}
.right {
float: right;
width: 800px;
}
.clear {
clear: both;
height: 1px;
}
</style>
Then I use them to layout my page.
<div>
<div class="left">
<ul>
<li>Categories</li>
<li>Weapons</li>
<li>Armor</li>
<li>Manuals</li>
<li>Sustenance</li>
<li>Test</li>
</ul>
</div>
<div class="right">
Blah Blah Blah....
</div>
</div>
<div class="clear" />
you can use float
<div class="left-menu">
<ul>
<li> Categories </li>
<li> Weapons </li>
<li> Armor </li>
<li> Manuals </li>
<li> Sustenance </li>
<li> Test </li>
</ul>
</div>
in css file
.left-menu{float:left;width:200px;}