• Howdy! Welcome to our community of more than 130.000 members devoted to web hosting. This is a great place to get special offers from web hosts and post your own requests or ads. To start posting sign up here. Cheers! /Peo, FreeWebSpace.net
managed wordpress hosting

Working with Divs

Status
Not open for further replies.
Dan

Dan

Bullah
NLC
I am creating a new Joomla template and having issues with a Div.

I am creating the layout with a Div Container that will have the main structure inside.
I want the Container to have a width of 100% but when I do it and preview it in a browser there is a space of about 3px on each side of the screen. So, it is not covering 100% of the screen on either side.

Also, the 100% Div also creates a horizontal scroll bar on the bottom of the screen if I give it a Position value of Absolute etc.

Here is the CSS for the container:

Code: 
#container {
	padding: 5px;
	width: 100%;
	border: 1px solid #282828;
}

And here is the HTML:

Code: 
<div id="container">Content for  id "container" Goes Here</div>

Any help would be greatly appreciated.
 
Hey danny boy.

Your page has a margin and you need to tell it not to.

Use this to remove your margin;
Code: 
<body topmargin="0" leftmargin="0" rightmargin="0" bottommargin="0" marginwidth="0" marginheight="0">
 
Try adding this to your CSS code.

Code: 
* {
	margin: 0;
	padding: 0;
}

That will reset all your default margins and paddings to 0 except for those which you define specifically.
 
This should work too, although it uses Absolute positioning.

HTML: 
#container {
	padding: 5px;
	width: 100%;
	border: 1px solid #282828;
       position: absolute;
       top: 0;
       left: 0;
}
 
It's because your stating you want your div to be 100% of the full screen plus 5px extra on each side.

Why do you need a 100% container? I imagine you're making a stretched theme?

Even with the above absolute, you're still saying 100% if the screen plus 5px on each side.

I suggest you transfer the padding to the next container along if thats possible in your case.
 
Last edited:
h0ster said:
It's because your stating you want your div to be 100% of the full screen plus 5px extra on each side.

Why do you need a 100% container? I imagine you're making a stretched theme?

Even with the above absolute, you're still saying 100% if the screen plus 5px on each side.

I suggest you transfer the padding to the next container along if thats possible in your case.
Click to expand...

I also tried it without the padding and that didn't work either.
What I was trying to do, and using the above "container" div as an example, was to create a header section the full 100% with the site body about 75% of the window.
 
Hmm, that sounds odd.

If you could send me a link i could take a look at it, if you'd rather not do this take a look at the CSS editor http://www.skybound.ca/ (stylizer) it lets you view te page in either the firefox or IE engine while you edit the CSS. It well surely make fixing the problem easier ;)

Tbh, if you do CSS work you should get it anyway, that or Firebug for firefox http://getfirebug.com/ Hope thats some help.
 
Status
Not open for further replies.
Back
Top