Designing our firm’s web site in CSS was coming alongside properly till I hit a roadblock. The problem was to create two columns of bulleted lists within the circulate of the textual content. The format I had in thoughts was one thing like this:
Article Continues Under
Paragraph 1
Bulleted record | Bulleted record
Paragraph 2
Bulleted record | Bulleted record
Paragraph 3
Bulleted record | Bulleted record
…and so forth
I tossed round some lists that labored wonderful in IE 6, however prompted a headache in virtually each different browser. Maybe I may have smashed by way of the roadblock utilizing horizontal lists. However I’ve at all times discovered it simpler to drift, in order that’s what I did.
To resolve the issue with floats, let’s assign two lessons of unordered lists, ul.left and ul.proper, which we’ll place in a div named “div” that’s 800 px broad (sure, 800 is simply an arbitrary quantity; you’ll be able to set it to no matter width you need). The essential CSS reads:
#div {width: 800px;}
ul.left {float: left;}
ul.proper {float: proper;}
For the markup, we’ll use three paragraphs of Lorem Ipsum textual content, slot within the unordered lists, and place the whole thing within the div. The markup appears to be like like this:
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim advert minim veniam, quis nostrud.
- Merchandise 1: Left
- Merchandise 2: Left
- Merchandise 3 Proper: A protracted merchandise
- Merchandise 4 Proper: That is longer, only for enjoyable
Duis aute irure dolor in reprehenderit in voluptatevelit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident.
- Merchandise 1 Left: Various size
- Merchandise 2 Left: This one varies in size, too
- Merchandise 3 Proper: That is shorter
- Merchandise 4 Proper: Proper
Pellentesque et erat. Quisque at quam. Donec accumsan tellus at tellus. Donec metus. Sed sit amet ante vitae metus imperdiet varius. Vestibulum pulvinar bibendum.
- Merchandise 3 Proper: One other lengthy merchandise
- Merchandise 4 Proper: Proper
The difficulty with Dilbert#section3
The difficulty with our UL floats is that this: the textual content of the paragraph under creeps up between the 2 floating ULs. Additionally, the UL floating proper loses alignment.
To beat this, we’ll do three issues:
- Set the margin, padding and border to zero. That is for consistency, to stop browsers from meddling with the alignment of our bullets with totally different “default” padding / margins.
- Specify the bullets. Once more, that is to take care of consistency throughout browsers. We’ll use easy sq. bullets.
- Declare the width of the ULs: Right here, we’ll assign an arbitrary width of 400 px for every UL, half the width of the containing div.
The CSS now appears to be like like this:
#div {width: 800px;}
ul.left {
float: left;
width: 400px;
margin: 0px;
padding: 0px;
border: 0px none;
list-style-position: inside;
list-style-type: sq.;
}
ul.proper {
float: proper;
width: 400px;
margin: 0px;
padding: 0px;
border: 0px none;
list-style-position: inside;
list-style-type: sq.;
}
The spacing gremlin#section4
IE 6 leaves an equal quantity of area earlier than and after the ULs. Nonetheless, later variations of Mozilla (1.7.3), Opera (7.54) and Firefox (1.0) go away area earlier than the ULs, however none after. To make sure that the area earlier than and after the ULs is equal, we’ll assign a padding of 15px to the highest and backside of the ULs, like so:
#div {width: 800px;}
ul.left {
float: left;
width: 400px;
margin: 0px;
padding: 15px 0px;
border: 0px none;
list-style-position: inside;
list-style-type: sq.;
}
ul.proper {
float: proper;
width: 400px;
margin: 0px;
padding: 15px 0px;
border: 0px none;
list-style-position: inside;
list-style-type: sq.;
}
IE 6 is pleased. There’s some area left after the ULs in Mozilla, Opera and Firefox, however the area earlier than and after the ULs continues to be not precisely equal. This uneven spacing is a results of the default area left after the previous paragraph, so it’s the paragraph that wants defining to right this. Defining the margin or padding on the high of our ULs is not going to clear up this downside.
We wish to cook dinner our fudge to perfection, so we’ll add a paragraph class and referred to as .no-space and set its margin and padding to 0:
.no-space {
margin: 0px;
padding: 0px;
}
We’ll additionally change the markup to incorporate this paragraph class:
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim advert minim veniam.
- Merchandise 1: Left
- Merchandise 2: Left
- Merchandise 3 Proper: A protracted merchandise
- Merchandise 4 Proper: That is longer, only for enjoyable
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat.
- Merchandise 1 Left: Various size
- Merchandise 2 Left: This one varies in size, too
- Merchandise 3 Proper: That is shorter
- Merchandise 4 Proper: Proper
Pellentesque et erat. Quisque at quam. Donec accumsan tellus at tellus. Donec metus. Sed sit amet ante vitae metus imperdiet varius.
- Merchandise 3 Proper: One other lengthy merchandise
- Merchandise 4 Proper: Proper
Now it appears everybody’s pleased, kind of. We’re virtually completed.
It could look higher, although, if the left column of bullets was indented, reasonably than being caught to the left margin. To attain this finish, we’ll do the next:
- Declare relative positioning for the left UL.
- Specify its distance from the left. In our instance, let’s make this distance 50 px.
The CSS now reads:
#div {width: 800px;}
ul.left {
float: left;
width: 400px;
margin: 0px;
padding: 15px 0px;
border: 0px none;
list-style-position: inside;
list-style-type: sq.;
place: relative;
left: 50px;
}
ul.proper {
float: proper;
width: 400px;
margin: 0px;
padding: 15px 0px;
border: 0px none;
list-style-position: inside;
list-style-type: sq.;
}
.no-space {
margin: 0px;
padding: 0px;
}
Issues are wanting good. That’s it from me, actually. Oh, and you may view the web page that gave me the two-list headache within the first place. The method used there’s fairly related.
I hope you benefit from the multi-layered fudge. Add your personal yummy gif bullets and serve piping nóng!