Learn VBA & Macros in 1 Week!

CSS - Trouble With Divider Alignment, Help!

Full Excel VBA Course - Beginner to Expert

Trouble With Divider Alignment, Help!	View Content

Hey guys,

So I am finishing up my website: www. paulfenton .tk

If you go to that site and scroll down you will see my resume posted (or you can click resume on the navbar).

I have put a bunch of dividers inside the post to separate the flow of it (under education, skills, awards... etc)

The problem is I want the divider to show up right underneath the heading with spacing underneath it. It is the opposite of this right now and I cant figure out how to fix it by changing the margins/padding of the div id resumeDivider.

Can anyone lend a hand?

-Paul

Full Excel VBA Course - Beginner to Expert

Similar Tutorials

Having Some Trouble With Alignment.

Trouble With Paragraph Alignment

Top Bar Alignment

Ie 6 Css Alignment

Div Alignment In Ie Again :(

Css Alignment Help

Div Alignment Issue

Horizontal Alignment

Nav Alignment Issues

Css Alignment Problems

Nav Tab Alignment Problem

Alignment Issues?

Pointers On Css Alignment Please?

Alignment Problems

Alignment Problems

Div Tag Alignment Problem

Css Alignment Over Images

Learn VBA & Macros for Excel in 1 Week!

Having Some Trouble With Alignment.

Similar Tutorials

Hey,
First off, please check out: identityrocket.com/website/index.php

Notice the huge negative space just above the big orange button in the bottom left corner. I can't get rid of that space or seem to align it properly. I'm getting so frustrated because it is probably something small.

Any help would be tremendously appreciated.

Thanks,
Ian.

Trouble With Paragraph Alignment

Similar Tutorials

I'm a CSS newbie and this is my very first page that I have to make for a class. I can't figure out how to move my text below/center my headline. Every time it gets close (when I use margins) it jumps right to the bottom.

P.S. If my code seems strange it's because I'm not really sure what I'm doing yet, so if you have any advice/better ways to achieve the same effect, please let me know

HTML:

<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<title>Welcome to Jolie Manor Bed and Breakfast</title>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>
<link rel="stylesheet" type="text/css" href="style3.css"/>
</head>
<body id="body" onload="">
<div id="wrap">
<img src="manor.jpeg" alt="Manor" class="floatleft" />
<h1> Jolie Manor <br />
<span class="smaller">Bed and Breakfast</span></h1>
<p class="blocktext"> Escape to Jolie Manor, a luxury waterfront bed and breakfast on the eastern shore, where the Chesapeake Bay is aglow in warm sunsets, where towering oaks gently kiss the skyline and where you can let your body rest and your mind wander.</p>

<div id="navcontainer">
<ul id="navlist">
<li id="active"><a href="#" id="current">Home Page</a></li>
<li><a href="assignment32.html">Amenities</a></li>
<li><a href="#">Rates</a></li>
<li><a href="#">Local Features</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>
</div>

</body>
</html>

CSS:

body
{
width: 800px;
height: 620px;
background-color: rgb(171,214,212);
}

#wrap
{
width: 100%;
height: 100%;
background-image:url(book2.tif);
background-repeat:no-repeat;
background-position: center;
}

h1
{
color: rgb(69,38,26);
font-family: serif;
margin-right: 150px;
margin-top: 100px;
margin-left: 0px;
float: right;
font-size: 2em;

}

.blocktext

{
margin-left: 10px;
margin-right: 0px;
width: 10em;
float: right;
margin-top: 170px;
margin-bottom: 0px;
}

p

{
color: rgb(69,38,26);
font-family: serif;

}

.floatleft
{
margin-left: 60px;
margin-top: 145px;

}
.smaller {
font-size: .75em;
}

#navcontainer
{
background: #f0e7d7;
margin: 0 auto;
padding: 1em 0 0 0;
font-family: georgia, serif;
text-transform: lowercase;
position:fixed; top:5px;

}
#navcontainer ul
{
padding: .2em 0;
margin: 0;
list-style-type: none;
background-color: rgb(69,38,26);
color: #FFF;
width: 100%;
font: normal 90% arial, helvetica, sans-serif;
text-align: center;
position:fixed; top:5px;
}

li { display: inline; }

li a
{
text-decoration: none;
background-color: rgb(69,38,26);
color: #FFF;
padding: .2em 1em;
border-right: 1px solid #fff;
}

li a:hover
{
background-color: #369;
color: #fff;
}

Css Alignment

Similar Tutorials

I have two columns (menu and content) and would like them to be horizontally aligned to the center sensitive to the size of the browser and relative to each other.

I have figured out how to do this with the content column (right one) but I'm having trouble doing this with the menu column. I would like it to be equally space relative to the placement of the content column.

Any help would be appreciated. Here's the code:

Code:

/ { 	margin: 0; 	padding: 0; }  
body { 	font-size: 12px; 	font-family: Helvetica Neue, Arial, Verdana, sans-serif; 	background: #F2F2F2; }  
body.section-1 { } 
body.section-2 { } 
body.section-3 { }  
a:link { text-decoration: none; } a:active { text-decoration: none; } a:visited { text-decoration: none; color: #666; }  a:hover {      background-color: black;     color: #f2f2f2;  }  a img { border: none; }  

#menu {     width: 130px;     overflow: hidden;     top: 40px;     position: fixed;     height: 100%;     background-color: #e6e6e6;     text-align: left;     margin: 0px 0px 0 0px 180px;     left: 12%; }  

#menu ul { 	list-style: none; 	margin: 0px; }  

#menu ul li.section-title { }   
#content {     height: 150%;     width: 700px;      margin: 0 0 0 300px;     top: 40px;     position: relative;     background-color: white;     overflow: auto;     padding: 15px;      margin-left: auto;     margin-right: auto; }  .container {     padding: 0px; }  

#content p { width: 400px; margin-bottom: 15px; }  
p {     margin: 0 0 9px 0; }  h1 { font-size: 32px; } h2 { font-size: 24px; } h3 { font-size: 16px; } h4 { font-size: 12px; }  

#img-container	{ margin: 0; padding: 0; } 

#img-container p	{ width: 400px; margin: 0; padding: 0 0 12px 0; }  #once { clear: left; }

Top Bar Alignment

Similar Tutorials

Been trying to get these divs to align but with no success.

Can someone be so kind to show me how to get the XHTML/CSS to look like the attachment below...

PHP Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html dir="ltr" lang="en" xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=us-ascii" />
<title>Top Bar</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<style type="text/css">
<![CDATA[/*>
</style>
</head>
  <body>
    <div class="bdr">
      <div class="lchief">
       IMAGE
        </div>
        <div class="rchief">
          <div class="stats">
            <div class="tmar">
              TBA
            </div>
            <div class="tmar">
              TBA
            </div>
            <div class="tnom">
              TBA
            </div>
            <div class="tmar2">
              TBA
            </div>
            <div class="tmar2">
              TBA
            </div>
            <div class="tnom2">
              TBA
            </div>
            <div class="tmar2">
              TBA
            </div>
            <div class="tmar2">
              TBA
            </div>
            <div class="tnom2">
              TBA
            </div>
            <div class="tmar2">
              TBA
            </div>
            <div class="tmar2">
              TBA
            </div>
            <div class="tnom2">
              TBA
            </div>
          </div>
          <div class="sidemenu">
            TBA<br />
            TBA<br />
            TBA<br />
            TBA<br />
            TBA<br />
            TBA<br />
            TBA<br />
          </div>
      </div>
    </div>
  </body>
</html>

TIA,
Taro

Ie 6 Css Alignment

Similar Tutorials

Hello...

Here is the site I'm having issues with ralphwall.com I'm noticing that it only happends in IE6 and not other browsers. It's shifting my float:right; column down the page.

Here is the code in my css. Could anyone please help? I'm starting to pull my hair out.

Thanks in advance.

body{
cursor:url("assets/mouse.cur");
background-color:#20110A;
overflow:hidden;
font-family:Georgia, "Times New Roman", Times;
font-size:14px;
color:#FEF5E0;
}
a:link{
color:#FEF5E0;
background-color:#7E5F33;
}
a:visited{
color: #FEF5E0;
background-color: #7E5F33;
}
a:hover{
color: #7E5F33;
background: #FEF5E0;
}
img{
border:0;
}
ul{
list-style-type:square;
}
#header{
float:left;
width:90%;
padding-left:5%;
padding-right:2.5%;
}
#header h1{
font-family:Georgia, "Times New Roman", Times;
font-size:36px;
font-style:italic;
color:#7E5F33;
}
#topnav{
float:right;
width:95%;
padding-right:2.5%;
text-align:right;
border-top: solid #7E5F33;
}
.hovermenu ul{
padding-left: 0;
margin-left: 0;
height: 16px;
}

.hovermenu ul li{
list-style: none;
display: inline;
}

.hovermenu ul li a{
padding: 2px .5em;
text-decoration: none;
float: right;
color: #FEF5E0;
background-color: #7E5F33;
border: 2px solid #7E5F33;
}

.hovermenu ul li a:hover{
background-color: #20110A;
border-style: outset;
}

html>body .hovermenu ul li a:active{ /* Apply mousedown effect only to NON IE browsers */
border-style: inset;
}
#left{
float:left;
width:20%;
padding-left:5%;
padding-right:2.5%;
}
#right{
float:right;
width:60%;
padding-left:5%;
padding-right:2.5%;
text-align:left;
verticle-aling:top;
}
#right h1{
font-family:Georgia, "Times New Roman", Times;
font-size:24px;
font-style:italic;
color:#7E5F33;
}
#footer{
float:right;
width:95%;
padding-right:2.5%;
font-style:italic;
text-align:right;
}

Alignment Help

Similar Tutorials

I am working on a site that I have taken over development of and there is an alignment problem here any ideas on what the problem is or how to fix it? Thanks!

Div Alignment In Ie Again :(

Similar Tutorials

hey all... i have got a prob with a area in IE. It looks great when the users browseer is fullscreen and no favourites/history etc window is open. However once the window is resized or fav's are turned on then the content div drops to the bottom works fine in Moz FF but can't make it work in IE..

any ideas from anyone would be really great. thanks

the link to the page is here

and for the css click here

thanks in advnaced !

RF

Css Alignment

Similar Tutorials

HI,

I'm trying to get a line of text to lineup with a textbox using css. The code I have is as follows:

Code:

.row {
  height: 30px;
  vertical-align: text-top;
}

.formField {
  border: 1px solid #666;
  width: 150px;
  background: #FFFFFF;
  color: #000000;
}


<body>

   <div class="row">
   xxxxx: <input type="text" class="formField">
   </div>
 
</body>

The textbox is sitting just above the text. How can I get them lined up properly?

Css Alignment Help

Similar Tutorials

Hi,

I am trying to convert my table design to CSS and building the bare structure now but having some troubles with the alignment/layout.

I want to move the left and right columns under the header div. but with float: left, they keep sticking to each other.

here is the link:

http://www.internationalnannies.com/test/

here is my CSS:
Code:

/* Structure setup */

#header {
	background-color: Aqua;
}

#body {
	background-color: grey;  	
}


#leftColumn {
	background-color: silver;
	float: left;
  width: 150px;
  position: relative;
}

#rightColumn {
	background-color: blue;
	float: left;
  width: auto;
  position: relative;
}

#footer {
  background-color: pink;
  clear: both;
  position: relative;
}

#photo {
  background-color: grey;
  margin-right: 5px;
  float: left;
  position: relative;
}

#headerRightContent {
  background-color: red;
  position: relative;
  float: left;
}
/* *********************************** */

and here is my html:

Code:

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

<html>
  <head>
    <title>index</title>
    
    <style type="text/css">
      @import "styles.css";
    </style> 
    
  </head>
  
  <body>
  
    <div id="header">
    
      <div id="photo"><img src="images/noImage.gif" width="120" height="160" alt="noImage (1K)" /></div>
      <div id="headerRightContent">right content</div>
    
    </div>
    
    <div id="body">
      <div id="leftColumn">left</div>
    
      <div id="rightColumn">right</div>
    </div>
    
    <div id="footer">footer</div>
  
  </body>
</html>

Can someone do a quick review of this and comment?

Thanks,
Edwinx

Div Alignment Issue

Similar Tutorials

Hello everyone.

Another episode of stupid CSS tricks here!

h-t-t-p://rewards.yarnell.openi.com/

This site looks good in IE8, Firefox, Safari, Chrome. Only older IE shows the rightmost DIV, the main content area, as underneath the rest of the page. This is not my first CSS only site, but for some reason, I can't figure out why it isnt displaying correctly in older IE. If you are using IE8 and need to see it broken, just throw the site into compatibility mode.

I have all the DIV styles in the source, not in a stylesheet to make it easy for anyone to help me with this.

I just know this is going to be something simple, and thank you in advance to anyone kind enough to give this a look!

Have a great day!

Horizontal Alignment

Similar Tutorials

Sorry if i repeat someone else's question, i've actually stumbled upon lots of solutions for this matter, but, as usual, there just seems to be no "only one" solution, so maybe someone here knows.

In the good old days if i wanted to center all kinds of stuff, i'd use <div align="center">all kinds of <stuff></stuff></div>. Now i visit the w3c site and see the beautiful "deprecated" word by the "align" property, so i guess they once again need us to bash our heads against the walls with the most stupid invention in mankind: css.

So can someone tell me how to center div's content horizontally? And not just text, i mean images, other tables or other kinds of things.

If i assume correctly:
If i use text-align - this is meant for text only
If i use margin: 0 auto - that would align the div itself and not the content and we would need to know its width

So is there any normal solution to this?

Nav Alignment Issues

Similar Tutorials

Hi all this is my first post on the board! I have a slightly annoying problem with a nav menu I am trying to make; Here is the css

#nav {

background:url(images/nav.gif) no-repeat;
width:470px;
height:40px;
margin-top:44px;
padding:0;
}

#nav span {
display: none;
}

#nav li, #nav a {
height:40px;
display:block;
}

#nav li {
float:left;
list-style:none;
display:inline;
}

#nav-01 {width:65px;}
#nav-02 {width: 65px;}
#nav-03 {width: 65px;}
#nav-04 {width: 65px;}
#nav-05 {width:65px;}
#nav-06 {width: 65px;}
#nav-07 {width: 65px;}

#nav-01 a:hover{background:url(images/nav.gif)0px -45px no-repeat;}
#nav-02 a:hover {background:url(images/nav.gif) -65px -45px no-repeat; }
#nav-03 a:hover {background:url(images/nav.gif) -130px -45px no-repeat; }
#nav-04 a:hover {background:url(images/nav.gif) -195px -45px no-repeat; }
#nav-05 a:hover {background:url(images/nav.gif) -260px -45px no-repeat; }
#nav-06 a:hover {background:url(images/nav.gif) -325px -45px no-repeat; }
#nav-07 a:hover {background:url(images/nav.gif) -390px -45px no-repeat; }

Here is the HTML:

<ul id="nav">
<li id="nav-01"><a href="index.html"><span>HOME</span></a></li>
<li id="nav-02"><a href="index.html"><span>PLANNING</span></a></li>
<li id="nav-03"><a href="index.html"><span>STRATEGY</span></a></li>
<li id="nav-04"><a href="index.html"><span>DELIVERY</span></a></li>
<li id="nav-05"><a href="index.html"><span>NEWS</span></a></li>
<li id="nav-06"><a href="about.html"><span>ABOUT US</span></a></li>
<li id="nav-07"><a href="index.html"><span>CONTACT</span></a></li>
</ul>

The problem I am having is that although the images are aligned when you hover over them, the image is sliced at the wrong position, I have tried adjusting every part of the css I can think of but I still can't figure it? Any ideas or help would be much appreciated.

i42.tinypic.com/16libh0.gif

here is the nav- notice the slice width is correct and the images are aligned, it is just that the slice happens in the wrong place.( u need to input the htt* bit )

Css Alignment Problems

Similar Tutorials

Hi Guys,

I'm having trouble with some alignment. I have a main div called 'left_sidebar' that has a few elements contained within it. At the top is a div that contains a user's profile pic, their name, and a link to edit their profile. Below that will be some navigation links, and some other items that will be dynamically populated depending on the page.

The div that contains the photo, name, and profile edit link is giving me some trouble.

Here's a pic of how it is currently

Here's what I'm hoping to get.

Below is the code I have. Nothing is being inherited that should affect how it's laid out or presented.

Thoughts? I'm racking my brain and can't get this right. Also.. I need the border div to expand since the height of the image will not be set in stone.

Code:

#left_sidebar 
	{
	float: left;
	margin: 0 0 .5em .5em; 
	width: 160px;

	}

#left_sidebar_border
	{
	border: 1px solid #e87b02;
	overflow: auto;
	height: 100%;
	margin: 0em 0em 1em 0em;
	}
	
#left_sidebar_pic 
	{
	margin: .5em .5em .5em .5em;
	}

#left_sidebar_name_action_container
	{
	margin: 0em 0em 0em 0em;
	}
	
#left_sidebar_name_action 
	{
	}


#left_sidebar_name 
	{
	}



<div id="left_sidebar">


	<div id="left_sidebar_border">


		<div id="left_sidebar_pic">

	

			<a href="http://details.at/members/members.cfm?q=mpv1&url=jasonallenking">

				<img style="float:left"src="http://details.at/imagehost/profiles/539/xs_IMAG0513.jpg">

			</a>

		

		</div>



		<div id="left_sidebar_name_action_container">


			<div id="left_sidebar_name">

				<span class="mediumboldtext">

					<a href="http://details.at/members/members.cfm?q=mpv1&url=jasonallenking">
						Jason King
					</a>

				</span>

			</div>

	

			<div id="left_sidebar_name_action">

				<span class="mediumtext">
					<a href="http://details.at/members/members.cfm?q=pbi">edit profile</a>

				</span>

			</div>		

		</div>

	</div>


</div>

Nav Tab Alignment Problem

Similar Tutorials

I'm using this layout, modified quite a bit for visual design, but the "mechanics" are the same as the author's demo for the most part:

http://matthewjamestaylor.com/blog/...rail-pixels.htm

The top navigation is a horazontal list aligned to the left.

What I would *like* to do is have all of the nav "tabs" aligned to the left as they are now, except the last one, aligned to the right. Sort of like this:

TTTT_____T

Any ideas?

Alignment Issues?

Similar Tutorials

Hello everyone!
I'm new here, but I'm not new to CSS!
I've built a website out of HTML, CSS, and Java Script.
I want to add some side boxes (navigation on sides) for quick navigation... But I am having a problem...
See the example page cfpmedia DOT COM / 2.0

As you can see... There is a bunch of text encased within a border. The title is Side Bar.
I need to know how to make it so the Side Bar is aligned with the Main border (the body).

I want to do this...
Example...

________ ________
|Side Bar| | Body |
| | | |
|_______| |_______|

I would like to know how to make them both perfectly aligned.

Here is my CSS Code...

body {background-color:#B2CC7C}
body {color:black}
body {text-align:center}
body {font-family: Comic Sans MS}
h3 {font-size:50px}
p.subject {font-size:20px}
p.subject{text-align:left}
p.body
{
border-style:solid;
border-width:1px;
border-color:#000000;
background-color:#BED490;
margin-top:0px;
margin-bottom:50px;
margin-right:85px;
margin-left:85px;
}
p.navbar
{
border-style:solid;
border-width:1px;
background-color:#BED490;
margin-top:0px;
margin-bottom:50px;
margin-right:200px;
margin-left:200px;
}
p.module
{
border-style:solid;
border-width:1px;
border-color:#000000;
background-color:#BED490;
margin-top:0px;
margin-bottom:50px;
margin-right:85%;
margin-left:-45px;
}

The P.Module is the one that controls the side bar, and the P.Body controls the body.

Pointers On Css Alignment Please?

Similar Tutorials

===

Edit: Awesome, after spending about a half an hour typing out this post, I can't get my link to my page, nor my images to load, unless I go spam five posts out really quickly. Being as this measure was obviously made to prevent spam, I don't think that would make me any friends. And with text descriptions only, it'll be really hard to explain my problem, since, you know, it's visual. And for my page to display correctly, I have to have a certain amount of text in my body section, that I'm sure no one wants to read, so I can't post my entire long html file, and even if I could, I'd have to tell people to make their own png images with the same names and sizes I used in order for them to see the problem. And trying to get around the URL filter by adding spaces and instructions would annoy people and probably get me banned anyway. I guess I'll have to ask somewhere else, there goes all my hard work.

And to head off the flames, I did read the rules before posting, albeit briefly. Obviously I didn't do a good enough job, and by missing a paragraph or two, I got screwed.

========
Original post that won't help anyone see the problem, written back when I was in a better mood, about five minutes ago.

I'm trying to build my own website, in HTML and CSS. I am running into some problems though, and I was wondering if anyone here could point me in the right direction.

If there is a site somewhere that answers this question, and I missed it due to lack of searching, please post the link if you know it anyway, because I searched extensively, I simply may have used the wrong keywords. Just because you found it in a few seconds, please do not assume that I haven't searched myself.

This is an archive (MediaFire) of my page, as well as a set of pictures (also included in this post) outlining what is wrong with the page. (Personal information replaced with Lorem Ipsum)

All issues are alignment related, although I'm not sure what the root cause of them is. I had some issues earlier about missing semi-colons and such, but I fixed those, to the best of my knowledge.

The first issue is that the title and link border I created to wrap around the top and left of my page are not lined up. There is a gap of about 5 pixels vertically, and the left border is about 3 pixels off to the left, compared to the top border. There are no line breaks, and although I can fix the issue with absolute distances, those break as soon as I resize my monitor. Percentages would not break on resize, but, they wouldn't fix the issue anyway, so that's a moot point. Here's a picture to show what I mean:

The second issue is one of less importance, but no less annoying, and I would think, easier to solve. In order to have my text not come off of the background image on the right side, I had to pad the div by 30 pixels. This causes the text to be too far to the right on the left side.

Last, I have a column issue. I created two divs inside a container div, and made a links column and a body column. Other than the text alignment problem above, they get along perfectly, until the end of the links column. At that point, the body column takes up the entire space there. This was right in the middle of a bulleted list in the original page, which made it look really ugly. But even if the list were to be moved somewhere else, it still would look bad. Is there any way to force the right column to be on the right side? I tried setting a width in the style, didn't affect it at all. I tried floating it to the right, while the links were floated to the left, but that made the background disappear and the text show up below everything else. Picture of original problem:

Thank you very much to anyone who helps out.

Alignment Problems

Similar Tutorials

Hi Guys,

I'm trying to create a simple search form. It will be a set of horizontal links seperated by pipes '|' with a simple form field search box below the set of links. I've it pretty much laid out how I want, but the links above the search box are not alinging with the search box correctly. I want the links pushed up against the text box.

Here is a pic showing how I want it to look. The first search box is how my code display now. The second box is what I am trying to achieve.

http://i617.photobucket.com/albums/...aderexample.jpg

Here is the code I have. I'm hoping to create a div that will wrap around this code and contain it well. I have a div defined in the code, but it doesn't have any attributes.

Any advice on how to change this to get it to display how I want? Please note, the span/class attributes found in the code relate to a style sheet I have defined elsewhere. However, it doesn't affect the alignment so I didn't include the stylesheet. There is no other CSS defined yet. My guess is I need to define a class for the DIV and parameterize that class to smash the two elements (links and search box) together.

Code:

<div>

<a href="http://www.company.com" class="active" title="Cars for Sale">
<span class="headersearchlink">Vehicles</span></a>

<span class="mediumtext">|</span>
<a href="http://www.company.com" class="active" title="Aircraft">
<span class="headersearchlink">Aircraft</span></a>

<span class="mediumtext">|</span>
<a href="http://www.company.com" title="Homes for Sale or Rent">
<span class="headersearchlink">Homes</span></a>

<span class="mediumtext">|</span>
<a href="http://www.company.com" title="Apartments">
<span class="headersearchlink">Apartments</span></a>

<span class="mediumtext">|</span>
<a href="http://www.company.com" title="Jobs & Resumes">
<span class="headersearchlink">Jobs</span></a>

<span class="mediumtext">|</span>
<a href="http://www.company.com" title="Pets for Sale">
<span class="headersearchlink">Pets</span></a>

<span class="mediumtext">|</span>
<a href="http://www.company.com" title="Items for Sale">
<span class="headersearchlink">Items for Sale</span></a><br>

<form method="post" action="" name="search-form">
<INPUT class="headersearchinput" type="Text" name="postal" size="85">
<INPUT class="headersearchinput" type="submit" name="search" value="search">
</form>

</div>

Alignment Problems

Similar Tutorials

I have a joomla site that i have install joomla with autostand all works fine but when i turn on the slider it mess the hole design up how can i sort this.

It also w3c validator show errors after i turn it on.

Any help would be great

my site here

Div Tag Alignment Problem

Similar Tutorials

Hi! I'm new to this forum, but I'm hoping you can help me! Included is my CSS coding. I am having a little bit of trouble getting #siteAds to have the correct width after adding borders to the three #mainContent. When I tweak the pixel amount it either runs onto the next line or just doesn't line up properly with #siteNav and #footer. I've tried replacing the pixel counts with percentages; doesn't work. I'm relatively new at CSS so any help would be appreciated. Thanks in advance!

Code:

<style type="text/css">
body
{
	background-image:url('bg-1.jpg');
	background-repeat:no-repeat;
	background-position:top;
	background-color:#FFF;
	background-attachment:fixed;
}
* {
	margin: 0px;
	padding: 0px;
}
#wrapper {
	height: 1300px;
	width: 1000px;
	margin:0px auto;
	text-align:left;
}
#branding {
	height: 228px;
	width: 1000px;
}
#branding #logo {
	height: 228px;
	width: 1000px;
	position: relative;
	background-image:url('hooplogolarge.jpg');
	background-repeat:no-repeat;
	background-position:top;
	background-color:#000000;
}
#siteNav {
	height: 38px;
	width: 1000px;
	color: #FFF;
	background-color: #000;
	line-height: 38px;
	clear: both;
	font-family: Arial, Helvetica, sans-serif;
	float: none;
	text-align: center;
	word-spacing: normal;
	font-size: 24px;
}
#mainContentWrapper {
	float: none;
	width: 1000px;
	background-color: #FFF;
}
#mainContentWrapper #news {
	float: left;
	width: 265px;
	height: 953px;
	background-color:#FFF;
	border: thin dashed #000;
	padding: 10px;
}
#mainContentWrapper #mainContent {
	float: left;
	width: 488px;
	height: 953px;
	background-color:#FFF;
	padding: 10px;
	border: thin dashed #000;
}
#mainContentWrapper #siteAds {
	float: right;
	width: 175px;
	height: 953px;
	background-color:#FFF;
	padding: 10px;
	border: thin dashed #000;
}
#footer {
	width: 1000px;
	font-size: 9px;
	color: #CCC;
	text-align: center;
	line-height: 35px;
	background-color: #000;
	clear: both;
}
</style>

Css Alignment Over Images

Similar Tutorials

Hi,

I have text that is generated from a mysql database and have positioned it over buttons in order to create a menu.

However I just thought in other browsers and other computers the text will align differently and therefore appear in random places on the website.

Is there any other way to do this?

Please explain it simply as I struggle with css at the nest of times.

Thanks in advance