Liquid + Fixed Two Column Lists with CSS
Tags: BeginnerEver tried creating a two column liquid llist with one of the columns being a fixed width? Usually creating table-like layouts in CSS can be a pain, but this quick tutorial will fix this common issue.
Common Mistakes and How to Correct Them
Typically most people will run into two annoying CSS issues.- Bug Example #1
The second column spills underneath the first column. View example - Bug Example #2
Both columns do not line up properly. View example
The Correct Method
XHTML & CSS
XHTMLI usually start off creating the rows using a list, then break the columns into its own divs.
The first div will be the fixed column, which in my example will contain the image and the image description. The second div will be the part that is liquid, allowing the content to be flexible according to the browser size.
<ul class="column"> <li> <div class="imgblock"> <img src="http://l.yimg.com/a/i/us/autos/autos_mb_concept_139x119.jpg" alt="" /> <strong>Image Name</strong> </div> <div class="detail"> <h2>Title</h2> <p>Caecus damnum commoveo abbas nunc sed multo neque eum. Ut qui mauris refero te nobis ullamcorper dolus, duis, adsum, odio. Loquor at loquor quis occuro valde facilisis dignissim plaga, molior interdico. Eros tego, verto ibidem tego, huic usitas adsum. Ullamcorper in vulpes, obruo dolore enim os quod. Velit abluo tation tum scisco, nullus odio ut quadrum luctus tum. </p> </div> </li> </ul>CSS
Ill start by styling the main list that will be spitting out each row.
Main list CSS
ul.column{
font-size: 1.2em;
margin: 10px 0;
padding: 0;
list-style: none;
float: left;
width: 100%;
border-top: 1px solid #ddd;
}
ul.column li {
float: left;
background: #f0f0f0;
width: 100%;
padding: 10px 0;
margin: 0;
border-bottom: 1px solid #ddd;
}Fixed Column CSSul.column li .imgblock {
font-weight: bold;
float: left;
width: 150px;
padding: 0 10px;
text-align: center;
}
ul.column li .imgblock img {
padding: 5px;
margin-bottom: 5px;
background: #fff;
border: 1px solid #ccc;
}Liquid Column CSS (Notice I do not add a float left, nor do I specify a width size to this column).ul.column li .detail{
padding-left: 170px;
}Additional Touch-ups
Now let’s dress up the elements inside of these columnsHeading and Paragraphs CSS
ul.column li h2, ul.column li p {margin: 5px 0; padding: 5px 0;}Bullet ListIncase you would like a bullet list in your detail section.
ul.column li ul.specs li {
float: none;
margin: 0 5px 0 20px;
padding: 0;
list-style: disc;
border: 0;
background: none;
width: auto;
}Finally, let’s add a class to every other list item for better legibility.ul.column li.even { background: #fff; }If you have a different solution or have any comments or questions, don’t be afraid to let me know!
Không có nhận xét nào:
Đăng nhận xét