CSS - Centered Divs Failing To Align Properly.

Hi everyone,

I am bad at this bit and i don't really know why. I have a div and a floated UL.

I want the div to sit next to the UL, however, it sits above it and I cannot get them to sit together.

Could someone please just post a brief method of getting them to sit side by side and I will try and work it for myself.

Thanks.

Page is http://www.wellandpower.net

im trying to get the menu tabs to line up properly, if you notice they are slightly floating higher than they should and was stuck in trying to figure out how to fix this.



here is my css code i used:

Code:

a:hover#index, a:hover#search, a:hover#ucp, a:hover#members {
	background: url("./images/home-button.gif") 0 0 no-repeat;
	background: url("./images/design-and-engineering-button.gif") 0 0 no-repeat;
	background: url("./images/how-to-rebuild-button.gif") 0 0 no-repeat;
	background:url("./images/installation-button.gif") 0 0 no-repeat;
}

a#index, a#design, a#howto, a#articles  {
	width: 77px;
	height: 28px;
	float: left;
	

}

a#index {
	background: url("./images/home-gray.gif") 0 0 no-repeat;
}
a#design {
	background: url("./images/design-and-engineering-gray.gif") 0 0 no-repeat;
}
a#howto {
	background: url("./images/how-to-rebuild-gray.gif") 0 0 no-repeat;
}
a#articles {
	background:url("./images/installation-gray.gif") 0 0 no-repeat;
}

I am trying to get the header image and navigation menus to align in the center. as well as centering the actual menu buttons.

here is my sample: http://blurple.net/design/

Here is stylesheet

Quote:
body {color:#121212; margin:20px 0 0;background:#D3D3D3;} body, p, h1, h2, h3, table, td, th, ul, ol, textarea, input {font-family:Arial, Verdana, Tahoma; font-size:11px; line- height:140%;} /* Class For Headings */ h1 {padding:15px 5px 15px 25px; margin:0; border:1px solid #55B5FF; background:#C0E4FF;} h2 {font-size:18px; color:#394352; padding:15px 0 2px 5px; margin:0 0 5px; color:#7628BD; border-bottom:1px solid #E4DCFF;} h3 {font-size:14px; color:#F26C00; padding:0 0 3px 0; margin:0; text-align:center;} h4 {font-size:13px; color:#3A74B9; padding:0 0 3px 0; margin:0;} h5 {font-size:13px; color:#F26C00;} h6 {font- size:10px; } p {padding:2px 0 12px; margin:0;} ul {padding-top:3px; margin-top:3px;} input.homInp {background:#55B5FF; border:1px solid #fff; color:#fff; height:18px; width:110px; vertical-align:middle; padding:0; margin:0;} input.go {background:url (images/go.gif) left top no-repeat; height:22px; width:24px; border:0; vertical- align:middle; padding:0; margin:0 0 0 3px;} .mainTab {width:917px;} .logo { margin:5px 10px 0; float:left;} .paddmenu {padding:0 6px; background:#fff;} .paddFoot {padding:0 10px 0 25px;; background:#fff;} .paddMid {padding:5px 10px; background:#fff;} .topicon {float:right; margin:35px 20px 5px 0;} .topicon img { vertical-align:middle;} .blueBox {border:1px solid #55B5FF; background:#C0E4FF; padding:0 10px 0 0;} .homBlueBox {border:1px solid #437DCD; background:#C0E4FF; border-top:0; border-bottom:0;} .homBlueBox td { padding:3px 15px 2px 30px;} .homBlueBox td.homBlueBord { padding:0; border-top:1px solid #437DCD;} .homLftBord {border:1px solid #B9B9B9; background:#fff; border-top:0; border-bottom:0;} .homLftBord td { padding:5px; line-height:130%;} .slidetabsmenu{float:center;width:100%;background:url (images/menubg.gif) top repeat-x;} .slidetabsmenu ul{list-style- type:none;margin:0;padding:0;} .slidetabsmenu li{display:inline;margin:0;padding:0;} .slidetabsmenu a{float:center;background:url(images/slide-left.gif) no-repeat left top;margin:0;margin:0;padding:0 0 0 10px;text-decoration:none;BORDER-RIGHT:#D8BCED 1px solid;BORDER-left:#121212 1px solid; line-height:normal;} .slidetabsmenu a.hombord{BORDER- left:0; padding-left:0;} .slidetabsmenu a.contactbord{BORDER-RIGHT:0;} .slidetabsmenu a span {float:left;display:block;background:url(images/slide-right.gif) no-repeat right top;padding:14px 13px 13px;font-size:14px; font-weight:bold; font-family:Tahoma;color:#fff;} /* Commented Backslash Hack hides rule from IE5-Mac \*/ .slidetabsmenu a span {float:none;} /* End IE5-Mac hack */ .slidetabsmenu a:hover span, .slidetabsmenu li.selected a span {color:#fff;text-decoration:none;} .slidetabsmenu a:hover, .slidetabsmenu li.selected a {background-position:0% -125px;text-decoration:none;} .slidetabsmenu a:hover span, .slidetabsmenu li.selected a span{background-position:100% -125px;} html>/**/body .IEonlybr{ /*None IE browsers hack*/display:none; /*Hide BR tag in non IE browsers, since it's not needed*/} /* ######### Style for Drop Down Menu ######### */ .dropmenudiv_c {position:absolute;top:0;border:1px solid #fff; font:normal 13px Tahoma;line-height:18px;z- index:100;background-color:#9449CE;width:200px;visibility:hidden;} .dropmenudiv_c a {width:auto;display:block;text-indent:5px;border:0 solid #fff;border-bottom-width: 1px; /*THEME CHANGE HERE*/padding:2px 0;text-decoration:none;font-weight:normal;color:#fff;} * html .dropmenudiv_c a{ /*IE only hack*/width:100%;} .dropmenudiv_c a:hover{ /*THEME CHANGE HERE*/background-color:#1798FF; color:#fff; text-decoration:none;} .dropmenudiv_c form {background-color:#B174E0; color:#000; padding:0 0 8px; margin:0;} a{color:#1963C0; text- decoration:none;} a:hover{text-decoration:underline;} .footerTxt {color:#7628BD;} .footerTxt a {color:#7628BD;} .middleTxt {padding:12px; font-size:12px;} .middleTxt p {font-size:12px;} .middleTxt td {font-size:12px; line-height:130%;} .middleTxt li {font-size:12px; line- height:130%;} a.readmore {background:url(images/readmore.gif) top left no-repeat;text- decoration:none; float:right; width:85px; height:20px; color:#121212; padding:2px 0 0 10px;} a.readmo hover {text-decoration:underline;} td.boxbgHost {padding: 5px 10px 8px 20px; background:url(images/hostingbg.jpg) bottom left no-repeat; font-size:10px;} .clr {clear:both;} .Tab{font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans- serif;width:100%;float:left;} .plans-head { font-family:"Trebuchet MS";color:#393939; line- height:28px; border:solid 1px #cdcdcd; font-size:16px; font-weight:bold; padding-left:10px; background:url(images/plans_head_bg.gif) repeat-x #cdcdcd;} #AKD_tab2 {border:1px solid #ccc; margin-left:20px;} .mainTable {width:917px; margin:0 auto; text-align:left; background:#fff;} .menubg {background:#500FA4 url(images/menubg.gif) top repeat-x; font-size:14px;} .footdotbg {background:#fff url(images/foot-dotbg.gif) top repeat-x; height:32px;} .grayheadbg {background:#CDCDCD url(images/grayheadbg.gif) top repeat-x; height:28px; border:1px solid #CDCDCD; border-bottom:0; padding-left:15px; font-size:16px; font- weight:bold; color:#000;} .grayshadbg {background:#fff url(images/grayshadbg.jpg) top right no-repeat; border:1px solid #CDCDCD; border-top:0; padding-left:15px;} .graybg {background:#F2F2F2; border:1px solid #CDCDCD; border-top:0; padding-left:15px;} .headBold {font-size:18px;} .slidetabsmenu{float:center;width:100%;background:url(images/menubg.gif) top repeat-x;} .slidetabsmenu ul{list-style-type:none;margin:0;padding:0;} .slidetabsmenu li{display:inline;margin:0;padding:0;} .slidetabsmenu a{float:left;background:url(images/slide-left.gif) no-repeat left top;margin:0;margin:0;padding:0 0 0 10px;text-decoration:none;BORDER-RIGHT:#D8BCED 1px solid;BORDER-left:#121212 1px solid; line-height:normal;} .slidetabsmenu a.hombord{BORDER-left:0; padding-left:0;} .slidetabsmenu a.contactbord{BORDER-RIGHT:0;} .slidetabsmenu a span {float:left;display:block;background:url(images/slide-right.gif) no- repeat right top;padding:14px 13px 13px;font-size:14px; font-weight:bold; font- family:Tahoma;color:#fff;} /* Commented Backslash Hack hides rule from IE5-Mac \*/ .slidetabsmenu a span {float:none;} /* End IE5-Mac hack */ .slidetabsmenu a:hover span, .slidetabsmenu li.selected a span{color:#fff;text- decoration:none;} .slidetabsmenu a:hover, .slidetabsmenu li.selected a{background-position:0% -125px;text- decoration:none;} .slidetabsmenu a:hover span, .slidetabsmenu li.selected a span{background-position:100% - 125px;} html>/**/body .IEonlybr{ /*None IE browsers hack*/display:none; /*Hide BR tag in non IE browsers, since it's not needed*/} /* ######### Style for Drop Down Menu ######### */ .dropmenudiv_c{position:absolute;top:0;border:1px solid #fff; font:normal 13px Tahoma;line- height:18px;z-index:100;background-color:#9449CE;width:200px;visibility:hidden;} .dropmenudiv_c a{width:auto;display:block;text-indent:5px;border:0 solid #fff;border-bottom -width: 1px; /*THEME CHANGE HERE*/padding:2px 0;text-decoration:none;font- weight:normal;color:#fff;} * html .dropmenudiv_c a{ /*IE only hack*/width:100%;} .dropmenudiv_c a:hover{ /*THEME CHANGE HERE*/background-color:#1798FF; color:#fff; text- decoration:none;} .dropmenudiv_c form{background-color:#B174E0; color:#000; padding:0 0 8px; margin:0;} * SLIDER */ .slider-wrap { width: 930px; /*position: absolute; top: 87px; left: 40px;*/ } .stripViewer .panelContainer .panel ul { text-align: left; margin: 0 15px 0 30px; } .stripViewer { position: relative; overflow: hidden; width: 930px; height: 276px; } .stripViewer .panelContainer { position: relative; left: 0; top: 0; } .stripViewer .panelContainer .panel { float: left; height: 100%; position: relative; width: 930px; } .stripNavL, .stripNavR, .stripNav { display: none; } .nav-thumb { border: 1px solid black; margin-right: 5px; } #movers-row { margin: 0; float: left; } #movers-row div { width: 30px; float: left; } #movers-row div a.cross-link { float: right; } .photo-meta-data { background: url(images/transpBlack.png); padding: 10px; height: 17px; position: relative; z-index: 9999; color: white; } .photo-meta-data span { font-size: 13px; } .cross-link { display: block; width: 23px; padding-top: 8px; z-index: 9999; float: left;} .active-thumb { background: transparent; } #fla_head img {width:917px;position:absolute;top:0;left:0;} #fla_head {width:930px;height:276px;overflow:hidden;position:relative;font-family:Arial, Helvetica, sans-serif, Calibri !important; } #fla_controls {width:917px;height:38px;font-family:Arial, Helvetica, sans-serif, Calibri ! important;} #fla_bgbar a{background:#fff url(images/imgmenubg.jpg) bottom repeat-x;} #fla_pages a{float:left;display:inline;font-size:11px;font-weight:bold;line- height:12px;border:1px solid #2d8ce6; width:28px;text-align:center;padding:2px 0 2px 0;color:#c0cfee;text-decoration:none !important;margin-right:3px;} #fla_pages {padding:11px 0 0 10px;display:block;height:20px;float:left;width:310px;} #fla_pages a:hover, #fla_pages a.active{border:1px solid #db7d0b; color:#fff;} #fla_other_controls {font-family:Arial, Helvetica, sans-serif, Calibri ! important;float:right;width:110px;padding-top:8px;} #fla_other_controls a{float:left;display:inline;font-size:10px;line-height:10px;text- decoration:none !important;color:#fff;text-align:center;padding:5px 0 1px 0;} #pause_scene {width:46px;margin:0 -5px;height:26px !important;} #pause_scene:hover {} #next_scene, #prev_scene {background: url(../images/header/next.png) no-repeat 0 0;width:26px;height:26px !important;} #next_scene:hover, #prev_scene:hover {}

Hi,

I'm having issues trying to get text to center on a few buttons.

Here's the site: http://www.highspeeddirtcheap.com

The buttons I'm having problems with are located near the top right, labeled as: Current Deal, How We Roll, and More Deals

Moreover, the buttons don't even show up in IE6 or 7.

Any ideas of what I'm doing wrong?

Thank you.

I'm trying to recreate a header that was built using tables.

Here is an example of the original header. This is how I want it to look using div.

http://65.175.116.253/logo/html_head_p1.html

Here is the code for the table based header

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>

<head>
</HEAD>

<body bgcolor="white" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
		
<basefont face="verdana">

<table width="780" height="68" border="0" cellpadding="0" cellspacing="0">
<tr> 
<td bgcolor="#004C91" align="center" valign="center" width="222"><img src="http://65.175.116.253/logo/logo.gif" width="196" height="49" hspace="10">
</td>
<td bgcolor="#004C91" align="center" valign="center" width="600">
<img src="http://65.175.116.253/logo/banner.jpg">
</td>
</tr>
</table>
</body>
</html>

Here is the header using the code with DIVs.

http://65.175.116.253/logo/styletest.html

Here is the code I have using divs. I'm confused as to how to align the images correctly in the divs... Can someone show me how to correct this? I put the style info in teh same document so it would be easier to read.

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>

<style type="text/css">
#headerlogo {
background: #004C91;
position: absolute;
width: 222px; 
height: 68px;
top: 0px;
padding-left: 0px;
padding-right: 0px;
}

#headerbanner {
background: #004C91;
position: absolute;
width: 600px; 
height: 68px;
top: 0px;
padding-left: 50px;
padding-right: 0px;
}
</style>

<title>Untitled</title>

</head>


<body>
<div id="headerlogo"><img src="http://65.175.116.253/logo/logo.gif">
<div id="headerbanner"><cfinclude template="banner.cfm">


</body>
</html>