How do i set a width?

Get Started
1

Hello, im new and just started learning to write html and css and I need some help.

  1. I want to set a width for my page. like the home page for sitepoint, there is a width set. How do I do that? I did something like this but its not working.

#siteContent { /* trying to set width*/
margin: 0 auto;
width: 500px;
}

  1. I started putting pictures and a navigation bar, but the only way I know how to position them is with position: absolute. I read somewhere that position absolute is a bad way of designing website and it will cause problem later on when updating a website. So what is another method that I can use to position my contents?
2

You need to post your html as well so we can try to see what went wrong. The width style is used to set a width on an element

You can use float but that is not appropriate for all cases.

You need to post your html as well if you want further help.

3

<div id=“siteContent”> <!-- Start of siteContent –>
<div id=“navigation”> <!-- Start of navigation –>
<ul id=“navLink”>
<li id=“firstNavItem”><a href=“homepage.html”>Home</a></li>
<li><a href=“about_us.html”>About Us</a></li>
<li><a href=“forums.html”>Forums</a></li>
<li></li>
</ul>
</div> <!-- End of navigation –>

	&lt;div id="logo"&gt; &lt;!-- Start of logo --&gt;
   		&lt;img src="logo.png" alt=""/&gt; 
	&lt;/div&gt;	&lt;!-- End of logo --&gt;

		&lt;h4 class="slogan"&gt;
		&lt;/h4&gt;
	&lt;div id="newsPost"&gt;  &lt;!-- Start of newsPost --&gt;
			&lt;h3&gt;News&lt;/h3&gt;		
	&lt;/div&gt; &lt;!-- End of newsPost --&gt;
		
    &lt;div id="latesPost"&gt; &lt;!-- Start of latestPost --&gt;
		&lt;h3&gt;Latest Post&lt;/h3&gt;
		 &lt;/div&gt; &lt;!-- End of latestPost --&gt;
&lt;/div&gt; &lt;!-- End of siteContent --&gt;

that the html want the css?

edit: I was able to put everything in the area with float =). If there’s another method or better one, please let me know. Thanks a lot for the help.

4

I combined your html and css (from post 1) into the following code.

The only addition I made is I added

border: 1px solid red

to #siteContent so I can see exactly where the div is.

In my IE8 and FF3.6 the siteContent div is 500px wide and is centered as specified in your posted css.

In your 1st post you said your css was not working. What browser and version are you using?

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
 
#siteContent { /* trying to set width*/
[COLOR=red]border: 1px solid red; /* this is my only addition */[/COLOR]
margin: 0 auto;
width: 500px;
}
 
</style>
</head>
<body>
 
<div id="siteContent"> <!-- Start of siteContent -->
<div id="navigation"> <!-- Start of navigation -->
<ul id="navLink">
<li id="firstNavItem"><a href="homepage.html">Home</a></li>
<li><a href="about_us.html">About Us</a></li>
<li><a href="forums.html">Forums</a></li>
<li></li>
</ul>
</div> <!-- End of navigation -->
<div id="logo"> <!-- Start of logo -->
<img src="logo.png" alt=""/> 
</div> <!-- End of logo -->
<h4 class="slogan">
</h4>
<div id="newsPost"> <!-- Start of newsPost -->
<h3>News</h3> 
</div> <!-- End of newsPost -->
<div id="latesPost"> <!-- Start of latestPost -->
<h3>Latest Post</h3>
</div> <!-- End of latestPost -->
</div> <!-- End of siteContent -->
 
</body>
</html>
5

firefox 3.6.12

i think it wasn’t working because I put all my element were set to position : absolute;

6

you haven’t posted all your css or exactly where you want your elements positioned, so there isn’t anymore I can do.

7

I solved the problem thanks to you. My css was the problem.

8

Would be nice to tell what the problem was and how you finally fixed it! Maybe someone else can learn from it!

9

Hi … after a put img and make ur table sure in design .then checked the code might be extra spaces in spaces u were not remove ,may be thats why u design size not set as u want.

10

Can someone translate the above post into plain English please?

11

:lol: I thought it was just me, when reading this the first time. I’m happy that everything is okay with me :slight_smile:

12

It’s either Engerish, Fluff or bad advice since it doesn’t relate to the original question as it doesn’t use tables. I am nearly tempted to Flag the post #9.