I have an unordered list styled to display horizontally. One of the li elements contains a div element. This div element is filled using ajax, though it shouldn't matter.
The div element has a larger height than the rest of the li elements, and by default it aligns with the bottom of the parent container.
Update: Well, isn't this awkward. I coded a simpler example in jsfiddle http://jsfiddle.net/Bfp3K/, and it works properly. I have to check my code again to get the error in the sandbox.
Update2: It wasn't that easy after all. I have added my proposed (and used) solution.
Update3: Disregard the previous answer, it wasn't correct. This is a simplified and testable example of the problem:
JSFiddle: http://jsfiddle.net/Bfp3K/10/
CSS:
#one {
background-color:red;
}
#two {
background-color:green;
}
#three {
background-color:yellow;
}
#four {
background-color:blue;
}
.normal {
height:100px;
width:200px;
display:inline-block;
}
.big {
height:200px;
width:300px;
display:inline-block;
}
ul {
display:block;
}
ul li{
display:inline;
}
HTML:
<ul>
<li><div id="one" class="normal">One</div></li>
<li><div id="two" class="normal">Two</div></li>
<li><div id="three" class="normal">Three</div></li>
<li><div id="four" class="big">
The last div vertically aligns to it's content's last line of text. I want to align the top of all the colored divs.
</div></li>
</ul>
Images:
What the solution should look like:
What the problem looks like:
Just replace the display:inline-block; declarations with float:left; Since you're specifying the dimensions anyway, you don't need inline-block. The jsFiddle works and here's a pic.
.normal {
height:100px;
width:200px;
float:left;}
.big {
height:200px;
width:300px;
float:left;}
The solution was very simple after all. Based on another answer:
li div{
vertical-align:top;
}
Since the elements have display:inline-block;, adding vertical-align:top seems to solve it. I won't mark this as the solution in case this isn't the proper solution.
http://jsfiddle.net/dv3Mm/
updated (bottom-aligned):
<html>
<head>
<style>
li {
display:inline-block;
}
.item {
vertical-align: bottom;
}
</style>
</head>
<body>
<ul>
<li>Text 1</li>
<li><div class="item">Text 2<img src="some.jpg"/></div></li>
<li>Text 3</li>
</ul>
</body>
</html>
Set the LI's line-height to the same pixel height of the image.
Solution 1 (quick and dirty):
set a margin-bottom: [negative value here]
or bottom: [negative value here] if your li are relatively positioned and the div is absolutely positioned. This is assuming that you know exact values.
Solution 2:
I'm assuming that the text in the other elements are links.
Set top and bottom padding to those links (specifically the <a> tags, so that they are vertically aligned in the middle)
Solution 3 (a bit more html):
Put two divs in each li. Wrap the div you already have in another div again. Use the a vertical centering method (such as the tabel-cell method) to vertically center all the inner divs. http://www.jakpsatweb.cz/css/css-vertical-center-solution.html
(The li tags you already have might already work as the outer div wrap, but I'm not sure. didn't get to test that yet)
In the code posted in the question the LIs have display: inline, and in the jsfiddle 'simpler example' their display is reset to inline-block (via classes). Inline-block is different from inline that it isolates any block-level content (like DIVs) inside, while attempting to put something block-level into inline causes the inline element to break into several so called anonymous block boxes. May be this is the reason?
Related
JS Fiddle here
I am attempting to align child elements evenly between left and right. I tried using margin-left and right: auto but nothing happened.
Here is a screen shot of the navigation in question. I have added a border of 1 px around each element so you can see:
I'd like the nav line items to be centred in comparisson to their parent. So in the image the line items would move to the right a bit to be centred between the parent rectangle, which is an unordered list.
Here is my approximation of the relevant html:
<nav>
<div id="main-nav">
<ul id="menu-main">
<li>cats</li>
<li>dogs</li>
<li>sheep</li>
</ul>
</div>
</nav>
Currently relevant (I think) CSS is:
#main-navigation {
display: inline;
float: left;}
#main-navigation div {
display: block;}
#menu-main {
position: relative;
float: left;}
#menu-main li {
float: left;
}
Put another way, I'd like to centre floated child elements against the parent. If I zoom in and out with my browser I can see that the nav adjusts and change size with some line items moving between top and bottom row in order to fit.
But is there a way to ensure that, whatever the current size of the nav, the child line items will be centred?
Here's another picture, where I have manually added a margin left to #menu-main.
Now it looks more centred on my screen right now. But is there a way to auto centre it?
See this : http://jsfiddle.net/rahjrLny/1/
You don't need to float your li elements, simply set them to display:inline . Then you can add text-align: centre to your ul element, and all should be good.
(You'll need to remove some margins that have appeared in the fiddle due to the changes)
This would be my solution: JSFiddle
There's some redundant CSS (for example, no need to specify #main-navigation div {display: block;} if you don't have any div elements inside the #main-navigation).
I've gone with display:inline-block as opposed to display:inline (plus added some colour borders for visual clarity). Please bear in mind I'm working with the code you supplied in the question rather than building the code from the screenshots.
nav {display:inline-block; width:100%;}
#main-nav {
float:left;
width:100%;
}
ul#menu-main {
margin:0;
padding:0;
text-align:center;
width:100%;
float:left;
}
#menu-main li {
list-style: none;
padding: 0.5em;
display:inline-block;
}
EDIT: I answered this question before I observed there was a fiddle supplied, and worked instead from the code supplied in the question. This may not be the right answer for OP but I'm going to leave it alone for now as I believe it gives a valid example of how one could approach the task of centering a nav list.
I'm trying to use the vertical-align: middle on a layout to vertically center sometimes text, sometimes images, but it's only working on text. Can anyone tell me why?
HTML:
<div>
<img src="http://jsfiddle.net/img/logo.png"/>
</div>
<div>
<span> text </span>
</div>
CSS:
div{
width:200px;
height:200px;
background-color:red;
display:table;
margin:10px;
}
img, span{
display:table-cell;
vertical-align:middle;
}
http://jsfiddle.net/9uD8M/ I created a fiddle aswell
Put border: 1px solid black on your img, span tags, then inspect both elements in the browser dev. console. You'll notice that the span defaults to 100% height of its parent, while the image has a defined height (the height of the actual image).
So you're not really vertically aligning those elements relative to the div, you're just vertically aligning the text inside the span element relative to the span :)
If you really want to use tables for vertical-centering, here's the correct code:
http://jsfiddle.net/WXLsY/
(vertical-align and display:table-cell go on the parent, and you need wrapper table on them)
But there are other ways to do this (SO has many answers to this question, just use search)
Here is one way of fixing the problem:
HTML:
<div>
<span><img src="http://jsfiddle.net/img/logo.png" /></span>
</div>
<div>
<span> text </span>
</div>
Put your img in a span, the image is a replaced element, it cannot contain children content, hence, vertical-align will not work.
CSS:
div {
width:200px;
height:200px;
background-color:red;
display:table;
margin:10px;
}
span {
display:table-cell;
vertical-align:middle;
}
See demo at: http://jsfiddle.net/audetwebdesign/Fz6Nj/
There are several ways of doing this, you could also apply display: table-cell to the parent div element, but that would be a different approach.
In order to vertically align an image inside a table cell you need to give the image a display of block.
display: block
margin: 0 auto
the margin: 0 auto is to align the image to the center. If you want the image left aligned then don't include this. If you want the image right aligned you can add:
float: right
Thanks,
G
You can try by adding -> line-height: 200px; in the span style section, I think it might work;
HTML
<div class="wrapper join-links">
<ul>
<li>Whatever</li>
<li>Something</li>
</ul>
</div>
CSS
.join-links li {
float:left;
margin-right:20px;
}
Is it somehow possible to align both links "centered" or "justified" inside of the sorrounding wrapper div?
http://jsfiddle.net/CRrmL/
edit: And I also wonder if I can align them right?
Change float: left to display: inline to give you:
.join-links li {
display: inline;
margin-right:20px;
}
You can then use text-align on the parent div.
Example centre align
Example right align
To align alinks to the right or center you need use text align and display inline or inline-block to li element. Float property transforms any element to a block.
http://jsfiddle.net/CRrmL/15/
http://jsfiddle.net/CRrmL/16/
You can do this through the common margin hack for centering:
.join-links ul{
margin:0 auto;
}
Then you need to set the li elements to be displayed in line:
.join-links li {
display:inline;
}
You can make the links justified like this. Just define a class to both li and float first li to left and second li to right.
Check this example
It seems there are several posts on this topic but none of the solutions have worked for me. Perhaps someone can figure out what I'm missing.
I have three boxes floated next to each other like columns. Due to certain background images etc., each box is composed of two divs. The outer div has the class "calloutbox" and is floated left. Inside of "calloutbox" is another div called "callout-content" that holds the dynamic content (I'm using wordpress).
So far I have not been able to get the boxes to expand to fit their dynamically generated content. They collapse if I set height to 100%. I've tried a dozen combinations of overflow:hidden, clear:both etc. with no luck.
<div id="callout-container">
<div class="calloutbox">
<div class="callout-content">Dynamic content goes here</div>
</div>
<div class="calloutbox">
<div class="callout-content"></div>
</div>
<div class="calloutbox">
<div class="callout-content"></div>
</div>
</div>
Here is the css:
.calloutbox {
min-height:310px;
width:30%;
float:left;
margin:0 0 0 25px;
position:relative;
background-image:url(images/shadow.png);
background-repeat:no-repeat;
background-position:right bottom;
display:block;
}
.calloutbox:after {
clear:both;
}
.callout-content:after {
clear:both;
}
.calloutbox:nth-child(1) {
min-height:200px;
}
/*The content inside the three boxes on the homepage */
.callout-content {
height:100%;
width:90%;
right:8px;
border:1px solid #e6e4e4;
bottom: 8px;
background-color:white;
position:absolute;
background-image:url(images/yellow-title-bar.png);
background-repeat:repeat-x;
background-position:top;
padding: 0 10px 10px 10px;
}
Here's the code in a jsfiddle if that helps anyone: http://jsfiddle.net/daniec/r8ezY/
Thanks in advance!
They are not floated, they are absolutely-positioned.
Absolutely-positioned elements are no longer part of the layout. They no longer have parents are far as layouts are concerned. Therefore, you need to specify their sizes in pixels rather than percentages. Percentages are relative to the wrappers they no longer have.
Working with floats can be a pain. As an alternative, have you tried using to use inline-block:
display: inline-block;
It behaves like an inline element, but an be styled like a block level element. It does not work in IE6 though.
.calloutbox {
white-space:nowrap;
}
Should do the trick. otherwise try creating a jsfiddle, so we can run your code
I've coded myself into a CSS corner. I have a list of images that I display next to each other using an unordered list. The unordered list is placed inside a fixed width div, so that each 3 images, the next 3 images will display on the next "row".
Each li in the ul does not just display the image, it displays all kinds of stuff, like so:
<div id="colmain">
<ul class="imagelist">
<li>
<h2>Image title</h2>
<img src="" />
<p>Description</p>
</li>
</ul>
</div>
This works fine in most browsers, except for IE7. IE7 display the images beneath each other instead of next to each other. I know from the classic horizontal menu bar technique that this can be fixed by setting the float to left for the li. This does not work for my situation, because I do not know the height of each li, it depends on content. Wit different heights for each li, some very strange layout situations occur, for example an image sitting on the right of an empty row. Here's a stripped version of my CSS:
.imagelist { border-collapse:collapse; font-size:9px; width:850px; }
.imagelist li { display:inline-block; list-style-type: none; max-width:240px; vertical-align:top; }
.imagelist li a { display:inline-block; position:relative; }
.imagelist li a img, { padding:0; margin:0; position:relative; }
Basically, I just want IE7 to listen to me and respect the inline-block statement, which SHOULD display elements next to each other.
Through a bit of smarter Googling I managed to find this entry:
http://flipc.blogspot.com/2009/02/damn-ie7-and-inline-block.html
zoom:1; and *display: inline; solve this issue. God I hate IE with a passion.