<div> vertical alignment
Question
I am trying to create a side navigation menu for a few pages on my site. I am using to create to different columns, one for the content, and one for the navigation menu. The problem is that the content is within the correct column, but it does not line up vertically with the menu.
I've used CSS to create two different columns on other pages of my site, but I am missing something here. What do I need to alter to make sure that the content on the right side of the page lines up at the top of the page with the menu bar? Thanks for any help, I really appreciate it.
Here is the code and accompanying jsfiddle link. http://jsfiddle.net/tbon324536/Fv5Q6/
table#vitamins{
border: 1px solid black;
font-size: 16px;
}
table#vitamins td {
border: 1px solid black;
padding: 5px;
font-size: 16px;
}
table#vitamins tr {
background: #b8d1f3;
font-size: 16px;
}
table#vitamins tr:nth-child(even) {
background: #b8d1f3;
}
table#vitamins tr:nth-child(odd) {
background: #dae5f4;
}
table#vitamins th {
border: 1 px solid black;
}
/**=============Content Layout================**/
#contentmenu ul {margin: 0;
float:none;
padding:0px;
width:180px;
list-style-type: none;
list-style-image: none;
}
#contentmenu li {display: inline;
float: left;
margin-right:10px;
}
#contentmenu a {display:block;
padding:10px;
width:180px;
color:#ffffff;
font-size:20px;
background-color:#2b547c;
}
#contentsubmenu ul {margin: 0;
float:none;
padding:0px;
width:180px;
list-style-type: none;
list-style-image: none;
}
#contentsubmenu li {display:block;
float: none;
}
#contentsubmenu a {display:block;
width:180px;
color:#000000;
font-size:16px;
border-bottom:solid;
border-bottom-width:1px;
background-color:#ffffff
}
#mineralmenu ul {margin: 0;
margin-left:260px;
width:180px;
list-style-type: none;
list-style-image: none;
}
#mineralmenu li {display: inline;
float: left;
margin-right:10px;
}
#mineralmenu a {display:block;
padding:10px;
width:180px;
color:#ffffff;
font-size:20px;
background-color:#2b547c;
}
#mineralsubmenu ul {margin: 0;
float:none;
padding:0px;
width:180px;
list-style-type: none;
list-style-image: none;
}
#mineralsubmenu li {display:block;
float: none;
}
#mineralsubmenu a {display:block;
width:180px;
color:#000000;
font-size:16px;
border-bottom:solid;
border-bottom-width:1px;
background-color:#ffffff;
}
#antioxidantmenu ul {margin: 0;
margin-left:500px;
width:180px;
list-style-type: none;
list-style-image: none;
}
#antioxidantmenu li {display: inline;
float: left;
margin-right:10px;
}
#antioxidantmenu a {display:block;
padding:10px;
width:180px;
color:#ffffff;
font-size:20px;
background-color:#2b547c;
}
#antioxidantsubmenu ul {margin: 0;
float:none;
padding:0px;
width:180px;
list-style-type: none;
list-style-image: none;
}
#antioxidantsubmenu li {display:block;
float: none;
}
#antioxidantsubmenu a {display:block;
width:180px;
color:#000000;
font-size:16px;
border-bottom:solid;
border-bottom-width:1px;
background-color:#ffffff;
}
/**===========Content Left Menu==============**/
#pagemenu ul {margin: 0;
float:none;
padding:0px;
width:100px;
list-style-type: none;
list-style-image: none;
}
#pagemenu li {display: inline;
float:none;
}
#pagemenu a {display:block;
padding:10px;
width:100px;
color:#ffffff;
font-size:16px;
background-color:#2b547c;
}
#pagesubmenu ul {margin: 0;
margin-right:15px;
float:none;
padding:0px;
width:100px;
list-style-type: none;
list-style-image: none;
}
#pagesubmenu li {display:block;
float: none;
}
#pagesubmenu a {display:block;
width:100px;
color:#000000;
font-size:14px;
border-bottom:solid;
border-bottom-width:1px;
background-color:#ffffff
}
**/============Paragraph Layout=============*//
#leftcontent {
padding-top:15px;
width: 480px;
float: none;
}
#rightcontent {
margin-left: 480px;
}
Here is the html.
<div id="leftcontent">
<div id="pagemenu">
<ul>
<li><a href="/Articles.asp?ID=273" alt="Vitamins">Vitamins ></a>
<div id="pagesubmenu">
<ul>
<li><a href="/Articles.asp?ID=265" alt="Vitamin A">Vitamin A ></a></li>
<li><a href="/Articles.asp?ID=266" alt="Vitamin B6">Vitamin B6 ></a></li>
<li><a href="/Articles.asp?ID=267" alt="Vitamin b12">Vitamin B12 ></a></li>
<li><a href="/Articles.asp?ID=268" alt="Vitamin C">Vitamin C ></a></li>
<li><a href="/Articles.asp?ID=268" alt="Vitamin D">Vitamin D ></a></li>
</ul>
</div>
</li>
</ul>
</div>
</div>
<div id="vitaminguide">
</div>
<br/><br/>
<div id="rightcontent">
<table id="vitamins">
<tbody>
<tr>
<th>
<inline style="font-size: 16px;">
Food
</inline>
</th>
<th>
<inline style="font-size: 16px;">
Serving Size
</inline>
</th>
<th>
<inline style="font-size: 16px;">
Amount (IU)
</inline>
</th>
<th>
<inline style="font-size: 16px;">
% Daily Value
</inline>
</th>
</tr>
<tr>
<td>
<inline style="font-size: 16px;">
Fish Oil, Cod Liver
</inline>
</td>
<td>
<inline style="font-size: 16px;">
1 Tbsp
</inline>
</td>
<td>
<inline style="font-size: 16px;">
1360
</inline>
</td>
<td>
<inline style="font-size: 16px;">
340%
</inline>
</td>
</tr>
<tr>
<td>
<inline style="font-size: 16px;">
Portabella Mushrooms, Grilled
</inline>
</td>
<td>
<inline style="font-size: 16px;">
1 Cup Sliced
</inline>
</td>
<td>
<inline style="font-size: 16px;">
634
</inline>
</td>
<td>
<inline style="font-size: 16px;">
159%
</inline>
</td>
</tr>
<tr>
<td>
<inline style="font-size: 16px;">
Rainbow Trout, Cooked
</inline>
</td>
<td>
<inline style="font-size: 16px;">
1 Fillet
</inline>
</td>
<td>
<inline style="font-size: 16px;">
539
</inline>
</td>
<td>
<inline style="font-size: 16px;">
135%
</inline>
</td>
</tr>
<tr>
<td>
<inline style="font-size: 16px;">
Sockeye Salmon, Cooked
</inline>
</td>
<td>
<inline style="font-size: 16px;">
3.0 Oz
</inline>
</td>
<td>
<inline style="font-size: 16px;">
447
</inline>
</td>
<td>
<inline style="font-size: 16px;">
112%
</inline>
</td>
</tr>
<tr>
<td>
<inline style="font-size: 16px;">
Canned Tuna Fish
</inline>
</td>
<td>
<inline style="font-size: 16px;">
1.0 Cup
</inline>
</td>
<td>
<inline style="font-size: 16px;">
393
</inline>
</td>
<td>
<inline style="font-size: 16px;">
98%
</inline>
</td>
</tr>
<tr>
<td>
<inline style="font-size: 16px;">
Morel Mushrooms
</inline>
</td>
<td>
<inline style="font-size: 16px;">
1.0 Cup
</inline>
</td>
<td>
<inline style="font-size: 16px;">
136
</inline>
</td>
<td>
<inline style="font-size: 16px;">
34%
</inline>
</td>
</tr>
<tr>
<td>
<inline style="font-size: 16px;">
Tilapia, Cooked
</inline>
</td>
<td>
<inline style="font-size: 16px;">
1 Fillet
</inline>
</td>
<td>
<inline style="font-size: 16px;">
130
</inline>
</td>
<td>
<inline style="font-size: 16px;">
33%
</inline>
</td>
</tr>
<tr>
<td>
<inline style="font-size: 16px;">
Whole Milk, Fortified
</inline>
</td>
<td>
<inline style="font-size: 16px;">
1.0 Cup
</inline>
</td>
<td>
<inline style="font-size: 16px;">
124
</inline>
</td>
<td>
<inline style="font-size: 16px;">
31%
</inline>
</td>
</tr>
<tr>
<td>
<inline style="font-size: 16px;">
Fortified Soy Milk
</inline>
</td>
<td>
<inline style="font-size: 16px;">
1.0 Cup
</inline>
</td>
<td>
<inline style="font-size: 16px;">
100
</inline>
</td>
<td>
<inline style="font-size: 16px;">
25%
</inline>
</td>
</tr>
<tr>
<td>
<inline style="font-size: 16px;">
Spareribs
</inline>
</td>
<td>
<inline style="font-size: 16px;">
3.0 Oz
</inline>
</td>
<td>
<inline style="font-size: 16px;">
88
</inline>
</td>
<td>
<inline style="font-size: 16px;">
22%
</inline>
</td>
</tr>
<tr>
<td>
<inline style="font-size: 16px;">
Roasted Turkey Breast
</inline>
</td>
<td>
<inline style="font-size: 16px;">
1 Breast
</inline>
</td>
<td>
<inline style="font-size: 16px;">
86
</inline>
</td>
<td>
<inline style="font-size: 16px;">
22%
</inline>
</td>
</tr>
<tr>
<td>
<inline style="font-size: 16px;">
Fortified Yogurt
</inline>
</td>
<td>
<inline style="font-size: 16px;">
1 Container (6 Oz.)
</inline>
</td>
<td>
<inline style="font-size: 16px;">
80
</inline>
</td>
<td>
<inline style="font-size: 16px;">
20%
</inline>
</td>
</tr>
<tr>
<td>
<inline style="font-size: 16px;">
Yellowfin Tuna, Cooked
</inline>
</td>
<td>
<inline style="font-size: 16px;">
3.0 Oz
</inline>
</td>
<td>
<inline style="font-size: 16px;">
70
</inline>
</td>
<td>
<inline style="font-size: 16px;">
18%
</inline>
</td>
</tr>
<tr>
<td>
<inline style="font-size: 16px;">
Ground Turkey, Raw
</inline>
</td>
<td>
<inline style="font-size: 16px;">
1.0 Lb
</inline>
</td>
<td>
<inline style="font-size: 16px;">
64
</inline>
</td>
<td>
<inline style="font-size: 16px;">
16%
</inline>
</td>
</tr>
<tr>
<td>
<inline style="font-size: 16px;">
Hard-Boiled Egg
</inline>
</td>
<td>
<inline style="font-size: 16px;">
1 Large Egg
</inline>
</td>
<td>
<inline style="font-size: 16px;">
44
</inline>
</td>
<td>
<inline style="font-size: 16px;">
11%
</inline>
</td>
</tr>
<tr>
<td>
<inline style="font-size: 16px;">
Pork Chop, Broiled
</inline>
</td>
<td>
<inline style="font-size: 16px;">
1 Chop
</inline>
</td>
<td>
<inline style="font-size: 16px;">
38
</inline>
</td>
<td>
<inline style="font-size: 16px;">
10%
</inline>
</td>
</tr>
</tbody>
</table>
<p>
<inline style="font-size: 16px;"><br/><b>Daily Recommendations for Vitamin D Intake</b><br/></inline>
</p>
<table id="vitamins">
<tbody>
<tr>
<th>
<inline style="font-size: 16px;">Age</inline>
</th>
<th>
<inline style="font-size: 16px;">Male</inline>
</th>
<th>
<inline style="font-size: 16px;">Female</inline>
</th>
<th>
<inline style="font-size: 16px;">Pregnant</inline>
</th>
<th>
<inline style="font-size: 16px;">Lactating</inline>
</th>
</tr>
<tr>
<td>
<inline style="font-size: 16px;">0-12 Months</inline>
</td>
<td>
<inline style="font-size: 16px;">400 IU</inline>
</td>
<td>
<inline style="font-size: 16px;">400 IU</inline>
</td>
<td>
<inline style="font-size: 16px;"></inline>
</td>
<td>
<inline style="font-size: 16px;"></inline>
</td>
</tr>
<tr>
<td>
<inline style="font-size: 16px;">1-13 Years</inline>
</td>
<td>
<inline style="font-size: 16px;">600 IU</inline>
</td>
<td>
<inline style="font-size: 16px;">600 IU</inline>
</td>
<td>
<inline style="font-size: 16px;"></inline>
</td>
<td>
<inline style="font-size: 16px;"></inline>
</td>
</tr>
<tr>
<td>
<inline style="font-size: 16px;">14-18 Years</inline>
</td>
<td>
<inline style="font-size: 16px;">600 IU</inline>
</td>
<td>
<inline style="font-size: 16px;">600 IU</inline>
</td>
<td>
<inline style="font-size: 16px;">600 IU</inline>
</td>
<td>
<inline style="font-size: 16px;">600 IU</inline>
</td>
</tr>
<tr>
<td>
<inline style="font-size: 16px;">19-50 Years</inline>
</td>
<td>
<inline style="font-size: 16px;">600 IU</inline>
</td>
<td>
<inline style="font-size: 16px;">600 IU</inline>
</td>
<td>
<inline style="font-size: 16px;">600 IU</inline>
</td>
<td>
<inline style="font-size: 16px;">600 IU</inline>
</td>
</tr>
<tr>
<td>
<inline style="font-size: 16px;">51-70 Years</inline>
</td>
<td>
<inline style="font-size: 16px;">600 IU</inline>
</td>
<td>
<inline style="font-size: 16px;">600 IU</inline>
</td>
<td>
<inline style="font-size: 16px;"></inline>
</td>
<td>
<inline style="font-size: 16px;"></inline>
</td>
</tr>
<tr>
<td>
<inline style="font-size: 16px;">70+ Years</inline>
</td>
<td>
<inline style="font-size: 16px;">600 IU</inline>
</td>
<td>
<inline style="font-size: 16px;">600 IU</inline>
</td>
<td>
<inline style="font-size: 16px;"></inline>
</td>
<td>
<inline style="font-size: 16px;"></inline>
</td>
</tr>
</tbody>
</table>
</div>
</div>
2 answers
solution1
1 ACCPTED 2014-04-07 13:58:12
You need to add float: left; property to your #leftcontent div.
Explanation, definition and examples here : http://www.w3schools.com/css/css_float.asp
solution2
1 2014-04-07 14:04:46
You need to use float: left; on your left column.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Vertical/Horizontal Alignment in Div
Vertical DIV Alignment
Vertical alignment of a floated div
Text Vertical Alignment on DIV
Div Vertical Alignment with Images
Vertical alignment of Pictures in Div
Div vertical alignment
CSS Vertical Alignment of Div
Vertical alignment inside a simple div
Vertical alignment of a div element in container
Related Tags