CODEWITHSUNDEEP
cssalignment
Terrell Anderson
Terrell Anderson

Reputation: 173

How do i align using list style?

Hey i'm trying to align things next to each other and under each other

Here is the css I'm using.

/* title styles */
#wpp-post-title {
 float:right;
 width:100px 

 }

 /* thumbnail styles */
 #wpp-thumbnail {
    float:left;
    width:80px;
 }

It shows up like this

enter image description here

but i want it to show like this

enter image description here

Upvotes: 0

Views: 1034

Answers (5)

stealthyninja
stealthyninja

Reputation: 10371

Something like this could work:

jsFiddle demo: http://jsfiddle.net/vPvbn/

CSS:

ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
}
li {
    display: block;
    height: 80px;
    margin: 10px 0;
    padding: 20px 0 0 85px;
}

HTML:

<ul>
    <li style="background: url(http://i.imgur.com/9M7yb.jpg) no-repeat 0 0; padding-right: 10px;">LEAKED: The Winner of RuPaul's Drag Race Season 4 Is...</li>
    <li  style="background: url(http://i.imgur.com/eJxiy.jpg) no-repeat 0 0; padding-right: 10px;">WATCH: Rihanna's 'Battlefield' Movie Trailer.</li> 
</ul>

Upvotes: 1

Michael
Michael

Reputation: 817

Giving #wpp-post-title a height that is equal to your thumbnail should solve the problem, at the moment the browser is automatically determining the height of the div based on the text inside it.

Also, make sure both divs are given display: inline-block property

Upvotes: 0

Karl Nicoll
Karl Nicoll

Reputation: 16419

Without seeing your HTML, I can only guess, but my best guess would be to add the following style to your CSS:

/* You will probably need to change "li" to something more specific, lest it
   break your existing list styles. */
li {
    overflow:hidden;
}

This will force the list item to wrap itself around your floated bits. Elements that are floated do not change the height of the parent container, so because everything inside the <li> is floated, your <li> element has a height of 0px, and you get the weird behaviour that you're seeing. overflow: hidden fixes this by forcing the <li> to acknowledge the height of #wpp-thumbnail and #wpp-post-title.

Upvotes: 0

Andrey Gubarev
Andrey Gubarev

Reputation: 791

Use classes instead of ids and look at clear property http://www.w3schools.com/cssref/pr_class_clear.asp

Upvotes: 1

AlexC
AlexC

Reputation: 9661

/* title styles */
#wpp-post-title {
 width:100px 
 display: inline-block;
 .display: inline;
 .zoom:1;

 }

 /* thumbnail styles */
 #wpp-thumbnail {
     display: inline-block;
     .display: inline;
     .zoom:1;
    width:80px;
 }

Upvotes: 0

Related Questions