Split <li> into two column - html

<ul>
<li>
<div class="ext-left">
<img class="ext-icon" src="http://dummyimage.com/48x48/000/fff.png">
</div>
<div class="ext-right">
<a class="ext-name" href="#">Extension Name</a>
<p class="ext-intro">Introduction here</p>
</div>
</li>
...
</ul>
I'd like to split the each list element into two part(in the same line), in the left is an image, in the right is a link and a text(they should be in two lines).
I tried to use float left on ext-left but it doen't work.
Play with jsfiddle: http://jsfiddle.net/UeThn/1/
This is the correct version: http://jsfiddle.net/UeThn/10/

Add this CSS:
.ext-left{
float:left;
}
li{
clear:both;
}
New fiddle here

Here is what you do
<ul>
<li style="width:150px">
<div style="width:100px;float:left">
<img class="ext-icon" src="http://dummyimage.com/48x48/000/fff.png">
</div>
<div style="width:50px;float:right">
<a class="ext-name" href="#">Extension Name</a>
<p class="ext-intro">Introduction here</p>
</div>
<br clear="both"/>
</li>
The idea is as follows:
1. give the 'li' a width
2. give both div's a width
3. float left and right respectively
4. Add a beak with clear="both" at the end

How about this:
li > div{
display: inline-block;
}
[JSFiddle]
(But evil browsers won't support that, see info here)

Floating left seemd to work. Think you've done something wrong.
http://jsfiddle.net/UXnVJ/

You just need to give each div a set width - otherwise, they think they should be 100% wide, which doesn't allow the next to float next to it. See fiddle-fix here.

Try this:
li {
clear: left;
}
.ext-left {
float: left;
}

Float both divs to the left
.ext-left, .ext-right{
float: left;
}
li {
clear: both;
}

Related

Display <div> inline with list item

Given a following structure:
<div class="index">a</div>
<div class="li">
<div class="index">b</div>
<div class="li">
some text
</div>
</div>
Is there a way to display it as this:
a b some text
and not:
a
b
some text
The problem is that I am not allowed to change HTML markup, so it's a pure CSS question.
EDIT:
"li" must have display set to list-item or follow the list hierarchy in terms of margins on the left side
You can float .index and .li
.li { display: list-item; }
.index, .li {
float: left;
}
<div class="index">a</div>
<div class="li">
<div class="index">b</div>
<div class="li">
some text
</div>
</div>
Have you tried editing the css for the li class?
.li { display: table-cell; }
This is where I found that answer: Remove padding from unordered list
If that doesn't work, could you post the relevant sections of the CSS you are working with as well?

making span and ul on the same line

I have the following fiddle, I wanted to make the span and the ul text to be vertically aligned. Right now the ul text seems to be a bit shifted up a bit, can't figure out why this is. Here's the respective html:
<div id="main">
<div class="row sort-container">
<span class="sort-by brandon-grotesque-regular">
Lihat berdasarkan:
</span>
<ul class="arvo-regular clearfix">
<li><a class="" href="?sort=popular">Barang Terpopuler</a></li>
<li><a class="" href="?sort=terbaru">Barang Terbaru</a></li>
</ul>
</div>
</div>
You can set vertical-align to middle on the ul element.
However, why do you need a layout so complex? It would be better if every element was inline, with no floated or inline-block box.
This is due to browser defaults, just like body element also has a padding...so we often use something like normalize to reset all of those in all browsers to 0.
ul{
margin:0;
padding:0;
}
And remove margin-left from #main .sort-container li {...
Thats it

Preventing divs with images from wrapping oddly in LIs

How may I prevent this odd cascading effect when using LI content such as the following:
http://jsfiddle.net/arPzt/1/
I can achieve the desired behavior by inserting BRs after each LI, but a) the vertical spacing between LIs seem to vary depending on the length of the content and b) there must be some better / more proper way of achieving this.
<ul>
<li>
<div style="background-color: #990000; width:70px; float: left">
<img style="width: 45px" src="http://www.google.com/doodle4google/images/doodles/2013/1-5.jpg" />
</div>
<div style="background-color: #00FF00; margin-left: 70px;" >
body some interesting large amount of content. some interesting large amount of content.
</div>
</li>
<li>
<div style="background-color: #990000; width:70px; float: left">
<img style="width: 45px" src="http://www.google.com/doodle4google/images/doodles/2013/1-5.jpg" />
</div>
<div style="background-color: #00FF00; margin-left: 70px;" >
body some interesting large amount of content. some interesting large amount of content.
</div>
</li>
<li>
<div style="background-color: #990000; width:70px; float: left">
<img style="width: 45px" src="http://www.google.com/doodle4google/images/doodles/2013/1-5.jpg" />
</div>
<div style="background-color: #00FF00; margin-left: 70px;" >
body some interesting large amount of content. some interesting large amount of content.
</div>
</li>
</ul>
You're floating the elements, but if you want them to clear the previous line, you need to use clear: left or clear: both if you ever use right floated elements.
li {
clear: left;
}
jsFiddle: http://jsfiddle.net/arPzt/3/
I would suggest that as an alternative to the clear:left suggestions, you consider using overflow:hidden on the li elements instead.
While clear:left fixes this simple example, you could still have layout issues with any additional content following the list. Using overflow:hidden on the li elements will restrict any floating effects to just those items.
More information in this article.
I believe what you need to do is simply clear the 'float' after each LI
Like this:
<li style="clear:both;">

CSS 2 column page with float not working

I've read through the many articles here on CSS Float but still can't get my simple example to work. I'm trying to get 2 columns on my page using this html:
<div id="mainContent" style="clear: both;">
<div id="categoryColumn" >
<h1 >
Recipe Categories
</h1>
<ul>
<li>cat1</li>
<li>cat2</li>
<li>cat3</li>
</ul>
</div>
<div id="menuColumn">
<h1>
Weekly Menus
</h1>
<ul>
<li>menu1</li>
<li>menu2</li>
<li>menu3</li>
<li>menu4</li>
<li>menu5</li>
</ul>
</div>
</div>
and this CSS
#categoryColumn
{
background-color: yellow;
width: 500px;
float: left;
}
#menuColumn
{
background-color: red;
width: 500px;
}
I know the divs are being recognized because the colors are correct, but the two lists are appearing on top of each other, not side by side. I want to top column (categoryColumn) on the left, and the bottom one on the right. Am I using the float wrong?
float needs to put on menuColumn as well.
add float:left to #menuColumn - see http://jsfiddle.net/UjLeK/
Hey Brad Irby need to float both div each other, Just check it... http://jsfiddle.net/mnuVB/

How can I make two vertical DIVs be the same length?

I have the following HTML:
<div id="body">
<div id="left">xx</div>
<div id="right">yy
aa
<br>
<br>
<br>
aa
</div>
</div>
and the following CSS:
#body { background-color: yellow; }
#left, #right { float: left; }
#left { background-color: blue; }
#right { background-color: red; }
What I need is for the DIV on the left to grow to be the same length as the one on the right? Is this possible? I tried a few things but it doesn't work.
fiddle
There are numerous way to try it. You didn't assign either of them a height so they won't be doing much at the moment. If you add equal heights, they can be the same. You can try style="height:100%;" for both of them
Or add that to those IDs in your CSS, or make a class with it and assign that to your divs.
something like this $("#right").css("height", $("#left").css("height"));
Here's a way about it, using display: table-cell
Won't work in older browsers.
http://jsfiddle.net/ZrGBB/
You could having the right inside the left as so
<div class="left">
aa
<div class="right">
bb
<br/>
<br/>
bb
</div>
<div style="clear:both"></div>
</div>
and floating the right div right and stoppnig the left colapsing using the clear:both
There's no real simple one line of code way to do this but there are many solutions out on the web like Faux Columns or Equal Height Columns.
Give it a Google and find a solution that works best for you.