I'm trying to accomplish this sort of layout..
Notice how the text is always vertical centered. I want to achieve that using vertical-align with divs.
Note: Blocks don't have a specific height. Using properties like top:50% or positioning won't achieve exact centering.
http://jsfiddle.net/V8S8b/
The problem is the image. The work around is to separate the image and the text content into two separate 'cells' which will correctly determine the alignment. Here is an example - I've had to set some width's for the containers but since they are acting as table cells they will adjust according to content (as I have tried to demonstate)
.ul.entries li {
display:table-row;
padding:8px;
border-bottom:1px solid #000;
}
You have an error here. ul should not be preceded by dot since its not a class .Rest looks fine.
Try the following, I edited the jsfiddle link you gave above and managed to get a similar layout to the picture you included above.
h1 {
display: inline-block;
font-size:18px;
font-weight:bold;
color: #fff;
margin-top: 20px;
margin-bottom: 10px;
}
ul.entries {
width:500px;
}
ul.entries li {
margin: 10px;
border-bottom:1px solid #000;
}
.inner {
overflow: hidden;
padding: 10px;
}
ul.entries li img {
float:left;
margin-right:15px;
display: inline;
}
Related
I have spent countless hours yesterday and today to figure out how to do this. I cant believe CSS doesn't have an easy way to handle this.
Essentially, I have some text within a span class="name" whose length is not fixed. In certain instances, it can spill over to the next line. How do I vertically align this within my container.
More specifically, how do I vertically align "ABC Father And Sons Company LLC" within my container?
http://jsfiddle.net/D3L8S/
<div class="container">
<span class="name">ABC Father And Sons Company LLC </span>
Address
Hours
More
</div>
css classes
// CSS
.container {
background: #DDEBF0;
padding: 11px;
border: 1px solid #D2D2D2;
width: 380px;
margin-bottom: 10px;
height:18px;
line-height:18px;
display:inline-block;
}
.name {
width:200px;
float:left;
}
.addr, .hours, .more {
width:60px;
float:left;
}
If I add a negative top margin to "name" (margin-top:-8px), I can achieve this but it obviously messes up rendering for XYZ Company LLC
http://jsfiddle.net/FM4dA/
The solution should ideally be Cross-browser compatible (atleast ie8 should support it)
EDIT - I forgot to mention initially that my container width is fixed and cannot be changed.
Here is one way of doing it using inline blocks:
.container {
background: #DDEBF0;
padding: 11px;
border: 1px solid #D2D2D2;
width: 380px;
height: 50px;
line-height: 50px;
margin-bottom: 10px;
display:inline-block;
}
.name {
width:200px;
display: inline-block;
vertical-align: middle;
line-height: 1;
}
.addr, .hours, .more {
display: inline-block;
vertical-align: middle;
line-height: 1;
}
First, make sure to leave enough vertical space for multi-line names, so on .container,
I used height: 50px and line-height: 50px.
However, you need to reset the line-height: 1 (or some suitable value) on the child elements otherwise the interline spacing will not be attractive.
Then, instead of floats, use display: inline-block and vertical-align: middle on the
child elements (.name, .addr, .hours, .more).
See demo at: http://jsfiddle.net/audetwebdesign/Wp84v/
Note: You may not need to specify the width on .addr, .hours, .more, so I let the
widths take on the shrink-to-fit value.
One way to vertically align div's contents is to use the vertical-align css property. But it works only on display:table-cell elements. So, wrap your container into a display:table div, and change the container display to display:table-cell.
Like this: http://jsfiddle.net/D3L8S/2/
Try this, It might help somebody
.name {
width:200px;
float:left;
margin-top:-8px;
word-wrap:break-word;
text-align: center;
}
DEMO
When you want to vertically center multiple lines, put the text into an inline block then pretend that the inline-block was a single line of text.
.container {
background: #DDEBF0;
padding: 11px;
border: 1px solid #D2D2D2;
width: 380px;
margin-bottom: 10px;
height: 18px;
line-height: 18px
display:inline-block;
}
.name {
width:200px;
float:left;
margin-top:-8px;
display: inline-block;
vertical-align: middle;
line-height: 14px;
}
NOTE:
Why you should add the line-height property ?
If you add height to an element , where exactly does the text inside of it lie? That is, if you have a block of text that is font-size: 10px (a theoretical height:10px) inside a container that is 60px where exactly is the text going to end up? Most surely at the top of the container, because the text can only position itself where the text flows, inside a height:10px space. But you can overcome that by using a line-height value the same height as the container, this way the text will take in the vertical-align property and align itself properly.
I have the following code. It's essentially a simple grid view that uses <ul> and <li> tags. I wanted to make it responsive such that the <li> elements are always centered no matter what the width of the screen is. How can I do so? I've tried setting the padding-left and padding-right as percentages, however it doesn't work. Right now if I adjust the width of the screen it doesn't always stay centered.
Simply add text-align: center to the parent <ul>
Fiddle
I'll extend on the previous answer...
Also center the UL
#home-listing {
text-align: center;
width:80%; /*Pick Your Own Width*/
margin:16px auto;
}
http://jsfiddle.net/Zd9Gf/3/
It depends on what you mean by centered. In order to center the entire list you could do something like:
ul {
padding: 0px;
width:500px;
margin:auto;
}
See this jsFiddle.
add this class:
ul.search-results{
width:100%;
}
and update this class:
ul.search-results li {
border-right: 1px solid #cecdcb;
border-bottom: 1px solid #cecdcb;
border-top: 1px solid #fff;
list-style: none;
padding: 0;
display: inline-block;
vertical-align: top;
width:60%;
margin:0 20%;
text-align:center;
}
In the following HTML:
<div class='title'><h2>Title</h2></div>
I want to resize the box, so wrote the following:
.title {
display: block;
border-radius: 12px;
border: 1px solid;
}
However, the resultant box looks a bit big, hence I tried to resize it.
.title {
height: 90%;
}
However, even if I tried to write the above code, the resultant box isn't affected by the settings.
.title {
height: 100px;
}
This worked. However, the text inside it is no more on the center, so I tried to make it at center.
.title h2 {
vertical-align: middle;
}
However, this doesn't work.
So how can I resize the box but still have text inside it intact?
Also, why the first height setting doesn't work but the second does?
Thanks.
Try applying: (working jsFiddle)
.title h2 {
margin:0px;
line-height:100px; /* change to fit your needs */
}
vertical-align is not the best approach in this case..
UPDATE:
Use this jsFiddle instead, it uses vertical-align as you wanted and you don't need to apply the line-height of h2.. the secret is making the parent display:table; and the child display:table-cell:
.title {
display: table; /* Here's the trick */
border-radius: 12px;
border: 1px solid;
height: 100px;
width:100%;
}
.title h2 {
display:table-cell; /* Here's the trick */
height:100%;
vertical-align:middle;
}
Check this jsfiddle. You can set line-height property to achieve this.
h2{line-height: 50px;}
Aim : I want to make my divs floating next to one another like this.
http://jsfiddle.net/x8Abc/1/
.post {
float:left;
padding:10px;
margin:5px;
border:1px solid #000;
width:25%;
}
Problem : when I have a content which of of more length in an in between div, then it is pushing the div below it to side like this.
http://jsfiddle.net/W3afJ/
.post {
float:left;
padding:10px;
margin:5px;
border:1px solid #000;
width:25%;
}
How can I achieve a uniform well packed layout like jsfiddle.net/x8Abc/1/ ?
You need to use display: inline-block in this situation.
Amend your css like so:
.post {
display: -moz-inline-stack;
display: inline-block;
*display: inline;
padding: 10px;
margin: 5px;
border: 1px solid #000;
width: 25%;
zoom: 1;
}
Here's a fiddle as well
To align the blocks vertically change the vertical-align css property, e.g.
.post {
display: -moz-inline-stack;
display: inline-block;
*display: inline;
padding: 10px;
margin: 5px;
border: 1px solid #000;
width: 25%;
zoom: 1;
vertical-align: top;
}
For more information on making display: inline-block work in IE (as I have done above) see here:
https://blog.mozilla.org/webdev/2009/02/20/cross-browser-inline-block/
You have a few different options:
Give each of your posts a fixed height, and set the overflow property to auto. This will (obviously) ensure that each is the same height and so avoid the issue where one floats next to its sibling, but will add scrollbars to divs with a lot of text, and blank space to the bottom of those with little (see it here):
.post {
float: left;
padding:10px;
margin:5px;
border:1px solid #000;
width:25%;
height: 250px;
overflow: auto;
}
Stick with float to lay out your posts, and ensure that the first post in each row is cleared (see it in action) . That can be achieved like this*:
.post:nth-child(3n + 1) { clear:both; }
Change your approach to laying out your posts to use inline-block, like this:
.post {
display: inline-block;
padding:10px;
margin:5px;
border:1px solid #000;
width:25%;
}
There is a fork of your original example here. I would recommend going with this approach, as it gives you the ability to vertically-align your posts as you see fit, and won't restrict the amount of copy in each like option 1. This article is a good read, and details how to get it working even in older browsers.
* Note that IE<9 won't support the nth-child pseudo-class, so you'd need a JavaScript fallback for those browsers.
This is how i configured the divs in HTML
<div id="wrapper"><div id="content"><div id="details-middle" class="box">
..........content.........
</div></div></div>
And this the css for the div's
#wrapper {
border-radius: 12px;
font-size:13px;
line-height:140%;
width:1008px;
margin:0 auto;
margin-top: 15px;
margin-bottom:15px;
}
#content {
margin-left:20px;
width:1008px;
}
#details-middle
{
float:left;
width:700px;
}
.box {border: 1px solid #CCC;
border-radius:12px;
margin-bottom:7px;
padding:10px 12px;
background-color: #FFF;
}
Everything is showing out of the div's ..
You are floating details-middle, which means non floated elements will not make room for it, unless they themselves are floated, or you clear the float.
My preferred solution is to give the parent overflow: hidden; which will force the parent to make room for its floated children:
#content
{
margin-left:20px;
width:1008px;
overflow: hidden; /* change here */
}
Not exactly sure what you're wanting, there isn't a lot of description in regards to your question, but you need:
$('#details-middle').text();
to gather just the text from that DIV.
If you're not wanting to display children elements of the DIV, then refer to this answer I gave recently - it might be your scenario too:
jQuery pull out text inside div but not in p tag