I’m having a few issues with my css layout. The code is below.
I’m trying to get the listed items to sit to the right of each image. I’m also trying to get the ‘read more’ text to appear after the lasted listed item on the right hand side. Any ideas?
<style> #container {
width: 100%;
font-family: Arial, Helvetica, sans-serif;
font-size: 67.5%;
}
ul {
}
li {
}
ul.features {
list-style-type: none;
}
ul.features li {
width: 50%;
float: left;
Then you will move over both the points section and the read more link to the right of the image.
Just make sure that the width % you decide on causes the section to be small enough to flow to the right of the image.
Thanks for the help. I seem to have a vastly difference look between IE and FF. I’m starting to wonder if this technique is wrong? Basically I’m trying to get my html sorted before using XSLT. Is there another way I should have done this?
Actually my bad. They do look the same in all browsers. However when I reduce the browser width, the list pushs below the image. Do I need to contain the image and list in one container to prevent this? Also find a screen grab attached. Thank you for your help.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
#container {
width: 100%;
font-family: Arial, Helvetica, sans-serif;
font-size: 67.5%;
}
ul {
}
li {
}
ul.features {
list-style-type: none;
}
ul.features li {
width: 50%;
float: left;
}
Ul.features img {
float: left;
margin-right: 5px;
padding: 5px;
width: 60px;
height: 60px;
}
ul.points, ul.features p {
float: right;
width: 80%;
}
ul.points {
margin-left: 0;
padding: 0;
}
ul.points li {
width: 95%;
list-style-type: disc;
padding: 0;
line-height: 1.1em;
}
</style>
</head>
<body>
<div id="container">
<ul class="features">
<li>
<h3><a href="">Payment Services</a></h3>
<img src="http://freethumbs.dreamstime.com/379/medium/free_3795612.jpg" alt="Locations" />
<ul class="points">
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit </li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit </li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
</ul>
<p><a href=""> ...read more</a></p>
</li>
<li>
<h3><a href="">Payment Services</a></h3>
<img src="http://freethumbs.dreamstime.com/379/medium/free_3795612.jpg" alt="Locations" />
<ul class="points">
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
</ul>
<p><a href=""> ...read more</a></p>
</li>
<li>
<h3><a href="">Payment Services</a></h3>
<img src="http://freethumbs.dreamstime.com/379/medium/free_3795612.jpg" alt="Locations" />
<ul class="points">
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elits</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit </li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit </li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
</ul>
<p><a href=""> ...read more</a></p>
<li>
<h3><a href="">Payment Servicest</a></h3>
<img src="http://freethumbs.dreamstime.com/379/medium/free_3795612.jpg" alt="Locations" />
<ul class="points">
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit </li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit </li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
</ul>
<p><a href="">...read more</a></p>
</li>
</ul>
</div>
</html>
When it’s resized I’d like it maintain it’s original layout. So I guess if someone viewed the layout with small screen res (believe or not I still have to cater for 800 x 600, the layout will be the same but they’d need to scroll the see everything. Maybe it needs a min-width in pixels? I’m not sure.
The margin between the list and the image expands. I’d like to keep the same margin no matter what the width of the browser is.
Sweet thank you. I’m learning slowly. Now I just have to figure out how to maintain the same margin width between the image and the list no matter what the browser width is. Dam, I wish their was a min-margin-left tag.
Hi,
I don’t mean rain on your parade here but as soon as one of your list items has more content than the others do your are going to get snagging floats. A cure for that is to use inline-block and set the vertical-alignment to top or bottom.
To see what I am talking about just add an extra <li> in one of the sub UL. I also cleaned out the sub UL class and just styled it with descendant selectors. You would see the same with your code though by adding more content to one of the sub UL <li>. One other thing, you always want to avoid setting 50% widths on your floats, they will drop when rounding errors occur. Background colors added to show what is going on.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>List Test</title>
<style type="text/css">
#container {
width:100%;
font:67.5%/1.3 Arial, Helvetica, sans-serif;
}
.features,
.features ul {
margin:0;
padding:0;
list-style:none;
}
.features li {
width:49.4%;
float:left;
margin:10px .4% 0 0;
background:#CDF;
}
.features img {
float:left;
margin-right:5px;
padding:5px;
width:60px;
height:60px;
background:red;
}
.features ul {
float:right;
width:75%;
padding-left:20px;
list-style:disc;
background:orange;
}
.features ul li {
width:100%;
line-height:1.1em;
background:yellow;
}
.features li p {
float:right;
clear:right;
background:lime;
}
.highlight {
color:red
}
</style>
</head>
<body>
<div id="container">
<ul class="features">
<li>
<h3><a href="#">Payment Services 1</a></h3>
<img src="http://freethumbs.dreamstime.com/379/medium/free_3795612.jpg" alt="Locations">
<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
<li class="highlight">5 Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
<li class="highlight">6 Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
</ul>
<p><a href="#">...read more</a></p>
</li>
<li>
<h3><a href="#">Payment Services 2</a></h3>
<img src="http://freethumbs.dreamstime.com/379/medium/free_3795612.jpg" alt="Locations">
<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
</ul>
<p><a href="#">...read more</a></p>
</li>
<li>
<h3><a href="#">Payment Services 3</a></h3>
<img src="http://freethumbs.dreamstime.com/379/medium/free_3795612.jpg" alt="Locations">
<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
</ul>
<p><a href="#">...read more</a></p>
</li>
<li>
<h3><a href="#">Payment Services 4</a></h3>
<img src="http://freethumbs.dreamstime.com/379/medium/free_3795612.jpg" alt="Locations">
<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
</ul>
<p><a href="#">...read more</a></p>
</li>
</ul>
</div>
</html>
Thank you Rayzur. So is my code ok now? Also how to ensure the right margin between the image and the list stays the same no matter what the width of the browser? Do I need to wrap the two elements together?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>List Test</title>
<style type="text/css">
#container {
width:100%;
font:67.5%/1.3 Arial, Helvetica, sans-serif;
min-width: 900px;
}
.features,
.features ul {
margin:0;
padding:0;
list-style:none;
}
.features li {
width:49.4%;
display: inline-block;
margin:10px .4% 0 0;
background:#CDF;
}
.features img {
float:left;
margin-right:5px;
padding:5px;
width:60px;
height:60px;
background:red;
}
.features ul {
float:right;
width:75%;
padding-left:20px;
list-style:disc;
background:orange;
}
.features ul li {
width:100%;
line-height:1.1em;
background:yellow;
}
.features li p {
float:right;
clear:right;
background:lime;
}
.highlight {
color:red
}
</style>
</head>
<body>
<div id="container">
<ul class="features">
<li>
<h3><a href="#">Payment Services 1</a></h3>
<img src="http://freethumbs.dreamstime.com/379/medium/free_3795612.jpg" alt="Locations">
<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
<li class="highlight">5 Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
<li class="highlight">6 Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
</ul>
<p><a href="#">...read more</a></p>
</li>
<li>
<h3><a href="#">Payment Services 2</a></h3>
<img src="http://freethumbs.dreamstime.com/379/medium/free_3795612.jpg" alt="Locations">
<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
</ul>
<p><a href="#">...read more</a></p>
</li>
<li>
<h3><a href="#">Payment Services 3</a></h3>
<img src="http://freethumbs.dreamstime.com/379/medium/free_3795612.jpg" alt="Locations">
<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
</ul>
<p><a href="#">...read more</a></p>
</li>
<li>
<h3><a href="#">Payment Services 4</a></h3>
<img src="http://freethumbs.dreamstime.com/379/medium/free_3795612.jpg" alt="Locations">
<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
</ul>
<p><a href="#">...read more</a></p>
</li>
</ul>
</div>
</html>
You got the right idea, we just need to give IE6/7 a little helping hand with inline-block.
Also how to ensure the right margin between the image and the list stays the same no matter what the width of the browser? Do I need to wrap the two elements together?
In that case I would remove the float completely from the sub ul and give it overflow:hidden; to stop it from sliding under the floated image. Then set your desired right margin on the image. That will keep the sub UL a fully fluid width without having to set a width.
Here is the basic idea, If you don’t want the whitespace-nodes causing the gaps between the LI then we can fix that too.
EDIT: We can remove the clear:right; from the <p> also since the sub UL is not floated.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>List Test</title>
<style type="text/css">
#container {
width:100%;
font:67.5%/1.3 Arial, Helvetica, sans-serif;
}
.features {
margin:0;
padding:0;
list-style:none;
}
.features li {
width:49%;
display:inline-block;
vertical-align:top;
margin:4px 0 0;
background:#CDF;
}
* html .features li{display:inline;}/*IE6 tripswitch*/
*+html .features li{display:inline;}/*IE7 tripswitch*/
.features img {
float:left;
width:60px;
height:60px;
margin-right:50px;
padding:5px;
background:red;
}
.features ul {
overflow:hidden;/*stop sub ul from sliding under floated image*/
margin:0;
padding:0 0 0 20px;
list-style:disc;
background:orange;
}
.features ul li {
display:list-item;/*reset from inline-block to get the bullets back*/
width:auto;
margin:.5em 0;
line-height:1.1;
background:yellow;
}
.features li p {
float:right;
background:lime;
}
.highlight {
color:red
}
</style>
</head>
<body>
<div id="container">
<ul class="features">
<li>
<h3><a href="#">Payment Services 1</a></h3>
<img src="http://freethumbs.dreamstime.com/379/medium/free_3795612.jpg" alt="Locations">
<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
<li class="highlight">5 Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
<li class="highlight">6 Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
</ul>
<p><a href="#">...read more</a></p>
</li>
<li>
<h3><a href="#">Payment Services 2</a></h3>
<img src="http://freethumbs.dreamstime.com/379/medium/free_3795612.jpg" alt="Locations">
<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
</ul>
<p><a href="#">...read more</a></p>
</li>
<li>
<h3><a href="#">Payment Services 3</a></h3>
<img src="http://freethumbs.dreamstime.com/379/medium/free_3795612.jpg" alt="Locations">
<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
</ul>
<p><a href="#">...read more</a></p>
</li>
<li>
<h3><a href="#">Payment Services 4</a></h3>
<img src="http://freethumbs.dreamstime.com/379/medium/free_3795612.jpg" alt="Locations">
<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
</ul>
<p><a href="#">...read more</a></p>
</li>
</ul>
</div>
</html>
Your welcome, just keep hanging around this forum and you will learn more about CSS.
If you want to get rid of the whitespace nodes like I mentioned then have a look through the recent CSS Quiz we had.
If they don’t bother you that’s fine but just be aware that they will be accounted for in the total space available. For example, if you tried to set the width to 50% or zoomed the font-size they would drop like floats do.
You can use text-align center on the UL though to even out the spacing on the sides. Just reset it to left on the LI.
.features {
margin:0;
padding:0;
list-style:none;
[COLOR=Blue]text-align:center;[COLOR=DarkGreen]/*center the list items*/[/COLOR][/COLOR]
}
.features li {
width:49%;
display:inline-block;
vertical-align:top;
margin:4px 0 0;
background:#CDF;
[COLOR=Blue]text-align:left;[COLOR=DarkGreen]/*reset from parent*/[/COLOR][/COLOR]
}
