CODEWITHSUNDEEP
htmlcss
spoon_man
spoon_man

Reputation: 11

How to align lists and text side by side with div tags?

I am relatively new to HTML and CSS and am working on recreating websites.

My output looks like this

My (sloppy) code is here: Both the CSS and HTML

http://pastebin.com/4EVBj5zK

I would like to know how to properly align my text to the right of the div.

Upvotes: 0

Views: 498

Answers (2)

Gacci
Gacci

Reputation: 1398

Try this, this solution would take care of the browser being resized. * Note: I noticed you are using li tags and I did not see any ul tag, generally li are using along with ul

.list-boxer{
    float: left;
}
.list{
    width: 275px;
  
    list-style: none;
    margin: 0px 0px;
    padding: 0px 0px;
}
.list li{
    width: inherit;
    font-family: Verdana, Geneva, sans-serif;
	display: inline-block;
	padding: 0px;
}
.list li a{
   display: block;
   padding: 30px 30px;
   margin: 25px 0px;
   border : 4px solid #ee7600;
}
.div_top_text_boxer{
    overflow: hidden;
    padding: 25px;
}
.div_top_text{
    width: 98%;
    padding: 1%;
}
<div class="list-boxer">
<ul class="list">
  <li><a href="www.google.com">FreePBX initial setup</a></li>
  <li><a href="www.google.com">FreePBX Advanced setup</a></li>
</ul>
</div>

<div class="div_top_text_boxer">
  <div class="div_top_text">
    FreePBX tech was created for beginners or experts of the open source pbx   system. Read our documents or watch our help videos to learn how to use the   latest version of FreePBX
    </div>
</div>

Upvotes: 0

Wowsk
Wowsk

Reputation: 3675

Make the text container have absolute positioning, and then position it to the very top and right of its parent.

You also need to make sure the parent element is relatively positioned.

head{font-family: Verdana, Geneva, sans-serif; 
}
body{background-color: #C0C0C0;
}
p{font-family: "Courier New", Courier, monospace;
}
.borderlist{
	list-style-position:inside;
	list-style-type:none;
}
.header{
	font-family: Verdana, Geneva, sans-serif;
	font-size: 50px;
	float: left-side;
	padding-top: 20px;
	padding-left: 50px;
	
}
a:link, a:visited, a:active{
	text-decoration: none;
	color: #292421;
	font-family: Verdana, Geneva, sans-serif;
	font-size: 20px;
	display: inline-block;
	border : 4px solid orange;
	width: 275px;
	padding: 30px;
	background-color: #D3D3D3;
	
}
a:hover{
	text-decoration: none;
	color: #292421;
	font-family: Verdana, Geneva, sans-serif;
	display: inline-block;
	border : 4px solid #ee7600;
	padding: 30px;
	background-color: #E8E8EE;
}
.div_top{
	background-color: #E18A07;
	width: 700px;
	height: 300px;
	padding-left: 50px;
	padding-top: 75px;
	margin-left: 75px;
	float:left;
  position:relative;
}
.div_top_text{
	width: 75px;
    top:0px;
    right:0px;
    position:absolute;
	padding-right: 20px;
    vertical-align:top;
}
.br_bigger{
	margin: 100px;
	padding: 100px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="style_test.css">
<title>Freepbx Support</title>
</head>
<body>
<header class="header"><b>FreePBX</b> Support</header>
<br>
<div class="div_top">
	<li class="borderlist"><a href="www.google.com">FreePBX initial setup</a></li>
	<br>
	<br>
	<br>
	<li class="borderlist"><a href="www.google.com">FreePBX Advanced setup</a></li>
	<div class="div_top_text">FreePBX tech was created for beginners or experts of the open source pbx system. Read our documents or watch our help videos to learn how to use the latest version of FreePBX</div>
	</div>
</body>
</html>

Upvotes: 1

Related Questions