Solved! HTML/CSS problem, Can someone find my mistake?

Sep 10, 2018
1
0
10
0
I have just began coding in HTML and I am getting ready for my first exam but I have already found a problem. I can not align side div to the left side, two divs are acting as one even tho I have chosen different classes. Also I do not now how to move up Contacts and About tab a bit. Here it is:
<!DOCTYPE html>
<html>
<head>
<style>
.lol ul li {
display: inline;
margin-left: 10px;
margin-bottom: 10px;
border-right: 1px solid white;
overflow: hidden;
float: right;
padding: 0px 5px;

}

div ul {
margin-right: 20px;
margin-bottom: 20px;
}
.lol {
padding: 5px ;
background-color: black;
color: white;
height: 30px;

}
.side {

background-color: black;
align: left;
width: 100px;
height: 500px;
}


</style>

<title>Page Title</title>
</head>
<body>



<div class="lol">
<ul>
<li> Contact </li>
<li> Phone </li>
<ul/>
<div/>
<div class="side">


<div/>

<body/>
<html/>
 

ChumP

Estimable
Sep 16, 2014
44
0
4,610
11
<body> element has by default padding and margin so I removed it... that's why your side div had an offset.
Also the <ul> list had no height so I gave it 100% (max height of the parent div) and then applied padding.
You had some of those divs and other tags (your body, html, etc.) closed like this: <div> ... <div/> - it's wrong.... either close it like this <div class="side">...</div> or like this <div class="side" />.
Here's the updated code:

HTML:
<!DOCTYPE html>
<html>
<head>
<style>

li
{
  margin-left: 10px;
  margin-bottom: 15px;
  border-right: 1px solid white;
  overflow: hidden;
  float: right;
  padding: 0px 5px;
}

body{
  margin:0;
  padding:0;
}

ul
{
  margin:0;
  padding-top:5px;
  padding-right:20px;
  height:100%;
}

.lol
{
  padding: 5px ;
  background-color: black;
  color: white;
  height: 30px;
}
.side
{
  background-color: black;
  align: left;
  width: 100px;
  height: 500px;
}


</style>

<title>Page Title</title>
</head>
<body>



<div class="lol">
  <ul>
    <li> Contact </li>
    <li> Phone </li>
  </ul>
</div>

<div class="side"></div>

</body>
</html>
 
Thread starter Similar threads Forum Replies Date
F Apps General Discussion 5
J Apps General Discussion 0
P Apps General Discussion 4
I Apps General Discussion 2
kikani.kautik Apps General Discussion 2
S Apps General Discussion 5
D Apps General Discussion 1
S Apps General Discussion 1
L Apps General Discussion 0
P Apps General Discussion 1
F Apps General Discussion 1
A Apps General Discussion 5
H Apps General Discussion 0
S Apps General Discussion 1
henrytcasey Apps General Discussion 2
P Apps General Discussion 1
B Apps General Discussion 0
reble Apps General Discussion 0
S Apps General Discussion 1
V Apps General Discussion 1

Similar threads


ASK THE COMMUNITY

TRENDING THREADS