Sorin D. Sorin D. - 3 months ago 13
CSS Question

CSS float ul lists and paragraphs

I tried to do this http://prntscr.com/cdbzsu but looks like I'm not so good with css float :(.

I tried to look on others tutorials but I still couldn't do it.

Please someone give some help.

This is what I did so far.



.edit-text {
font-size: 13px;
}
.edit-text p {
width: 100%;
}
.edit-text ul {
float: left;
}
.edit-text ul li {
list-style: circle inside;
}
.edit-text img {
float: right;
width: 102px;
height: 130px;
}
.edit-text a {
clear: both;
background-color: #002B0F;
color: #FFFFFF;
padding: 3px 15px;
}

<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div class="edit-text">
<p>Vous-voulez nous consulter pour vous aider à réviser votre vitrine commerciale?</p>
<p>Ce service inclut: </p>
<ul>
<li>La révision</li>
<li>La mise en page de la vitrine commerciale</li>
<li>La correction et l’adaptation de mots clés pour le SEO</li>
<li>Service payant</li>
</ul>
<a href="#" title="Click here">Cliquez ici pour envoyer la demande de consultation</a>
<img src="http://www.holidaymood.com/images/ContactGirl.png" alt="Image">
</div>
</body>
</html>




Answer

Shift your img above the green text and clear the float by using:

<div style="clear:both;"></div>

after the img tag and I think you can move it forward from here. Cheers!

.edit-text {
  font-size: 13px;
}
.edit-text p {
  width: 100%;
}
.edit-text ul {
  float: left;
}
.edit-text ul li {
  list-style: circle inside;
}
.edit-text img {
  float: right;
  width: 102px;
  height: 130px;
}
.edit-text a {
  clear: both;
  background-color: #002B0F;
  color: #FFFFFF;
  padding: 3px 15px;
}
<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
	<div class="edit-text">
		<p>Vous-voulez nous consulter pour vous aider à réviser votre vitrine commerciale?</p>
		<p>Ce service inclut: </p>
		<ul>
			<li>La révision</li>
			<li>La mise en page de la vitrine commerciale</li>
			<li>La correction et l’adaptation de mots clés pour le SEO</li>
			<li>Service payant</li>
		</ul>
		<img src="http://www.holidaymood.com/images/ContactGirl.png" alt="Image">
        <div style="clear:both;"></div>
		<a href="#" title="Click here">Cliquez ici pour envoyer la demande de consultation</a>

	</div>
</body>
</html>

Comments