Distributing Inline Elements Using CSS - css

Is there an easy way to distribute inline elements within a parent block container using CSS? Setting margins to auto doesn't work since the margins between inline elements are set to 0 and I don't want to mess around with percentages as the content is dynamic.
In particular, I have several anchor elements (a) within a paragraph (p) that spans 80% of its container and I'm looking for an easy way to distribute them evenly within the paragraph.
EDIT (#cletus): The paragraph will not wrap and the anchors are the only thing in the paragraph. By distribute evenly, I mean that the space between the left (right) edge and first (last) element and the elements themselves is equidistant.

Unfortunately, this is not possible with CSS. However, in the special case where your elements are of equal width, this CSS hack makes it fairly easy.
With equidistant spacing between variable-width elements even specifying widths in percentages for each element's container will not suffice. This would still create a variable width between the elements.
This is probably possible to do with JavaScript on most modern browsers. Here is an example page demonstrating a poorly implemented JavaScript hack and proof that attempting to use text justification to solve this problem will not work reliably.

If CSS3 is acceptable (ie, if how it looks in IE6 is not of primary importance), you can use the display property values of "table" and "table-cell" to use the table display model with any type of element; "inline-block" is also something to consider, which acts like a block without breaking a new line.

Hmmm, sounds to me like you're creating a menu? You might want to use a list to hold your anchors and style the list accordingly. This is the commonly accepted best practice.
As for even distribution of elements, I was looking yesterday for something similar, I was hoping it would be in the CSS3 spec, but it's not (at least I can't find it) which seems like a major f*ckup if you ask me. Anyway...
Which leaves two options. CSS, and Javascript.
With CSS, use the margin-right property for each element. It's a good idea to create a .last class that sets margin-right to zero which prevents your last element from breaking the layout.
There's a bunch of javascripts out there that will do this for you. I prefer only to use JS when absolutely essential, so I couldn't comment on which one is best.
... there is one last thing you could try, but... you didn't hear this from me ok?
You could use a table. That is the quickest (and dirtiest) way to get what you want.
IMHO, and you probably don't want to hear this, but the design is probably flawed. It's common knowledge that distributing items evenly across a layout with CSS is a pain, so designers should avoid it.
UPDATE: You could also try
.link_container { text-align: center; }
.link_container a { margin-right: 10x; }
.last { margin-right: 0; }
then use something like this
<div class='link-container'>
<a href='...'>Some line</a>
<a href='...'>Some line</a>
<a href='...'>Some line</a>
<a class='last' href='...'>Some line</a>
</div>
That might get you close.

Best solution I've found is to center align the containing div then give each of the links a fixed and reasonable left and right padding that can accommodate both the long links and short ones. While this won't evenly space your links all the way across the top bar it will provide a visually pleasing effect.
<div style='text-align:center'>
<a style='padding-left:10px;padding-right:10px'>Link 1</a>
<a style='padding-left:10px;padding-right:10px'>Link 2</a>
<a style='padding-left:10px;padding-right:10px'>Link 3</a>
</div>

It's a bit unclear what you mean by "distributing evenly"; Could it be that you want to justify the contents of the paragraph?
p { text-align: justify; }

do your anchors have specific widths set? i think that might be necessary for any margin auto's to work.

using display: table on the container and display: table-cell on the items within seems to do the trick for me. It even works in IE8
<!DOCTYPE html>
<html>
<head>
<!-- insert reset CSS here -->
<style type="text/css">
#header {
width: 940px;
margin: 0 auto;
background-color: #E6EFE6;
}
#main_nav {
width: 100%;
display: table;
}
#main_nav .nav-item {
display: table-cell;
text-align:center;
}
</style>
</head>
<body>
<div id="header">
<ul class="" id="main_nav">
<li class="nav-item first">
Item 1
</li>
<li class="nav-item">
Item 2
</li>
<li class="nav-item">
Item 2
</li>
<li class="nav-item">
Item 2
</li>
<li class="nav-item">
Item 2
</li>
<li class="nav-item">
Item 2
</li>
<li class="nav-item last">
Item 3
</li>
</ul>
</div>
<body>
</html>

Related

ol within ul and make certain list items extend to the width of parent element

I am kind of new to css and trying to create a layout that presents a list of books. Therefore I want to display a cover image (represented by a fixed width div in the fiddle) at the left side of a two column layout. To the right of the cover I want to present information about the book: The title and an ordered list which has property-value items.
These items should fill the remaining part of the width. The property and its corresponding value should be placed on the same line.
One of the property value items also contains a button, which is just represented by a span here. The button should be placed in the same line right after the property.
I have run into several problems, which I couldn't sort out so far:
The property list is not formatted correctly. I guess that is because I haven't been able to configure the containing list item to extend to the full width. In the end a property value item should be displayed on the same line.
The Title is underlined and I would like to see that underline extend to the full width of the body. Currently it is truncated and I haven't been able to figure out a way to make that happen.
I have created a fiddle, which should show the problems: http://jsfiddle.net/7Xeb7/3/
This is my basic html structure:
<body>
<ul class="book">
<li>
<div class="cover"></div>
</li>
<li class="bookdetail">
<div class="title">Title</div>
<ol class="attributes">
<li>
<span class="property">property <span>btn</span></span>
<span class="value">value</span>
</li>
<li>
<span class="property">property</span>
<span class="value">value</span>
</li>
</ol>
</li>
</ul>
</body>
Short Answer
Your HTML is somewhat more complicated than necessary and makes unorthodox use of list elements for things that aren't really lists. Simplifying it would make styling the page easier. I have done so in this jsFiddle, where I think your problems have been taken care of by absolutely positioning .cover and adding appropriate padding to .bookdetails: http://jsfiddle.net/7Xeb7/10/. (Edit: new jsfiddle reflects comments)
Long Answer
As much as possible, the HTML tags you use should be semantically-related to the content they represent. So use ul or ol for lists of things, use img for images, and use heading tags (h1, h2, etc.) for headings. There's no need to use tables here (which are generally frowned upon for layout since they violate this semantic logic). Here I've preserved your structure and CSS classes but used more logical tags:
<div class="book">
<img class="cover" src="" alt="Book Title Here" />
<div class="bookdetail">
<h2 class="title">Title</h2>
<ol class="attributes">
<li>
<span class="property">property</span> <!-- this span wasn't closed before! -->
<span class="button">btn</span></span>
<span class="value">value</span>
</li>
<li>
<span class="property">property</span>
<span class="value">value</span>
</li>
</ol>
</div><!-- /.bookdetail -->
</div><!-- /.book -->
Once the HTML has been cleaned up you can more easily make the necessary CSS changes. Your main issue is getting .bookdetail in the right place. It's hard at the moment because you're trying to balance a fixed-width element (.cover) with a variable-width element (.bookdetail) that you want to take up the whole of its container - except for the fixed-width element.
This can be solved fairly easily by absolutely positioning .cover, so it no longer has any effect on the positioning of other elements in .book. Then you can just set the padding of .bookdetail to 0 0 0 140px - which is automatically relative to the most recent parent element with a specified position, which I've made .book. So .bookdetail expands to fill book like you want, but the right padding (or margin, if you prefer) means that it doesn't overlap with the cover image.
I've also made a few other CSS changes, visible in the jsFiddle, to make .title display better and to accommodate my HTML changes, but they're not directly relevant to solving your main issue so I'll leave them there.
I have changed your layout accordingly using div and tables
<div class="leftColumn">
</div>
<div class="rightColumn">
<div class="header">
Title
</div>
<div class="content">
<table width="100%">
<tr><td>Property1<td><td>Value</td>
<tr><td>Property2<td><td>Value</td>
<tr><td>Property3<td><td>Value</td>
<div>
</div>
and css
.leftColumn
{
float:left;
width:30%;
height:250px;
background-color:red;
}
.rightColumn
{
float:right;
width:70%;
height:250px;
background-color:green;
}
.header
{
font-size:25px;
padding:15px;
height:30px;
verticle-align:middle;
border-bottom:1px solid #ccc;
}
have a look here
you are missing width attribute for dimensions but not sure if this is how you want to see it:
http://jsfiddle.net/Riskbreaker/7Xeb7/4/
I added width: 100% on you bookdetail class
.bookdetail {
vertical-align:top;
display: inline-block;
width: 100%;
}

Using Haml with the inline-block spacing gaps

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:

Horizontal list with select box

I am using the <ul><li> list tag within which I have 3 tags like sos:
<ul id="reg-lists" >
<li class="one">
<select>...</select>
</li>
<li class="two">
<select>...</select>
</li>
<li class="three">
<select>...</select>
</li>
</ul>
I have the proper css to make the list horizontal:
#the-form li {
display:inline !important;
list-style-type: none;
padding-right: 10px;
}
I does'nt seem to work though and am not sure why. Horizontal rule seems to apply well until you put the combos. Would appreciate your help. Thanks
It works fine for me -- see this JSFiddle -- the list items are displayed horizontally, at least they are when I look at it in Firefox.
If you're seeing something else in another browser, please let us know.
If this is case, the solution may be to use display:inline-block instead of display:inline.
inline-block is similar to inline, but allows the element to contain block type elements, which are not allowed by the normal display:inline style.
Hope that helps.
You need to give your <ul> a set width which is equal to the width of all the combined <li>'s and then set your <li>'s to float:left;

Firefox CSS nowrap problem

I'm trying to create a horizontal (no line breaks) unordered list of images on my website using code as follows:
<ul class="ImageSet">
<li>
<img src="blah">
</li>
<li>
<img src="blah">
</li>
<li>
<img src="blah">
</li>
</ul>
In my CSS, I'm using the following rules:
.ImageSet { white-space: nowrap; }
.ImageSet li { display: inline; float: left; height: 100% }
This is working properly in Chrome, but not in Firefox, for some reason does anyone know why?
EDIT: To clarify, the problem in FF is that the li's still wrap. I'm trying to make them all appear in a single, unbroken horizontal line going off the rightmost edge of the page.
Try removing float:left as display:inline should suffice
When you float li's they will wrap when they reach the end of their parent container (which could be the body tag). If you are wanting the image to disappear out of the screen you will need to set the width of the parent container (the ul) and use overflow hidden or auto to get your desired effect.

What is the best way to position a div in CSS?

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;}

Resources