Default Spacing Between DIVs in CSS

J

Jay.s

New member
Dec 8, 2011
35
0
0
I'm trying to get text from a div under a div to have little to no margin.

Here's the pic:
107ud6u.jpg


I want "Recent Works" and "About Me" to have little to no space between them and the div above them. I've tried setting margins and padding to 0 already.

DIV setup for the site:
Wrapper (centered vertically and horizontally)
-Banner (top)
-Logo (left side of banner) DIV and Menu (right side of banner) DIV
-Sidebar DIV (left)
-bodyHome DIV (right)

Here's the CSS code:

Code: 
#wrapper {
position:absolute;
	top: 50%;
	left: 50%;
	width:750px;
	height:475px;
	margin-top: -225px;
	margin-left: -375px;
	border: 1px solid #008000;
	background-color: #f3f3f3;
}

#bodyHome{
font-family:BLEGH
font-size:14px;
position:absolute;
top:100;
left:200;
padding: 0 10px;
border: 1px solid #000033;
margin:0;
}

#banner{
position:absolute;
top:0;
height:100px;
width:750px;
border : 1px solid #000033;
margin:0;
}

#sidebar{
font-family: BLEGH
font-size:14px;
width:200px;
height: 375px;
border : 1px solid #008000;
position:absolute;
top:100;
left:0;
}

#logo{
width:200px;
position:absolute;
top:0;
left:0;
}

#rightBanner{
width:550px;
position:absolute;
top:0;
left:200px;
}

Can I tune this to what I want or is it caused by something out of my control (browser defaults, CSS defaults, etc.)?
 


From this statement . . . "-Logo (left side of banner) DIV and Menu (right side of banner) DIV".
Does this mean "About Me" and "Recent Works:" is in the div #rightBanner? If so I do not see any mention of zeroed out margins and especially padding. Also you may want to try setting line-height.

Is there a reason everything is absolute positioned? Posting the relevant html might help.
 
without looking at your html ...
it usually means your div is inheriting a parent css from somewhere usually
in chrome, right click on the div and go "inspect element"

go to the "Styles" tab on the right and see what classes are being applied to it
 
EDIT: So I can get the text to where I want it but that requires me using a negative margin. Still hoping to get the problem resolved without having to overlap DIVs.


Uptime said:
From this statement . . . "-Logo (left side of banner) DIV and Menu (right side of banner) DIV".
Does this mean "About Me" and "Recent Works:" is in the div #rightBanner? If so I do not see any mention of zeroed out margins and especially padding. Also you may want to try setting line-height.

Is there a reason everything is absolute positioned? Posting the relevant html might help.
Click to expand...

About me is in it's own div and recent works is as well. I'll put the html code at the bottom of the post so you can check it out.

As for absolute positioning, when I started using floats to position everything within #wrapper it got all fucked up and I got pissed and just arranged them in absolute since it seemed to be the easiest - Is there any down-side to absolute positioning?

Also you're right I didn't include zeroed out margins in #rightbanner or #logo at first, after your suggestion I added it and no cigar. Line height also did not fix it - it looks like a margin/padding issue no doubt I just don't get what's overriding my zeroed margin/padding.

imkazu said:
without looking at your html ...
it usually means your div is inheriting a parent css from somewhere usually
in chrome, right click on the div and go "inspect element"

go to the "Styles" tab on the right and see what classes are being applied to it
Click to expand...

That's what I suspect, it's inheriting some properties from somewhere. When I inspect element > styles it gives me an empty class
Code: 
element.style {
}
Matched CSS Rules


Thank you guys for your replies and input. Here's the html code (borders are there just to help me arrange DIVs):

Code: 
<html>
<link rel="stylesheet" type="text/css" href="css1.css" media="screen" />

<div id="wrapper">

<div id="banner">

<div id="logo";>
<h1> JW </h1> 
</div>

<div id="rightBanner">
<a href="http://checkjoel.com">Home</a>
<a href="">Blog</a>
<a href="">Portfolio</a>
<a href="">Contact Me</a>
</div>

</div>

<div id="sidebar">
<h3>About Me</h3>
<p>
Blaaaaaa
</p>
</div>

<div id="bodyHome">
<h3>Recent Works:</h3>
<a href="">Work 1</a></br>
<a href="">Work 1</a></br>
<a href="">Work 1</a></br></br>
<b>Availability:</b> Waa
</br>
</br>
<b>R</b> S
</div>

</div>
</html>

Rest of the CSS code that I don't think is relevant to the problem, but maybe I'm wrong:

Code: 
body {
font-family:
font-size:14px;
}

p {
font-family:
font-size:14px;
}

h1{
font-family:
font-size: 40px;
font-weight: 400;
}
 
Well I feel like a dumbass. Solution was to set h3 margins and padding to 0 :conehead:

Now the "Recent Works" in #bodyHome is where I want it - right on the DIV's edges, but the About Me section is improved but there's still a small space there :crying:

Is it something with the borders interfering with div space or what?

Pic:
25fohu8.jpg


*note* I know having it right on the edges looks like shit. The point is I want full control over my margins and padding
 
At first glance I suspect it is the <h3> tags surrounding the problem text. They push space by their default definition. Quick test remove both the <h3> tags and then the <p> beneath and see if it makes a dif. If it does one possible route would be to try styling it out with inline css within the tag itself.

<h3 style="margin:0px; padding:0px;">About Me</h3>

If that works then adjust px values to suit. The <p> tag below may not be a factor just keep in mind as they have padding included also.

Not on a machine I can test atm so this is just off the top of my head and the style example above may have syntax / logic issues as well.

________

Edit: Note to self, when walking away from a reply check to see if it is still needed before sending some mins later.
 
Uptime said:
At first glance I suspect it is the <h3> tags surrounding the problem text. They push space by their default definition. Quick test remove both the <h3> tags and then the <p> beneath and see if it makes a dif. If it does one possible route would be to try styling it out with inline css within the tag itself.

<h3 style="margin:0px; padding:0px;">About Me</h3>

If that works then adjust px values to suit. The <p> tag below may not be a factor just keep in mind as they have padding included also.

Not on a machine I can test atm so this is just off the top of my head and the style example above may have syntax / logic issues as well.

________

Edit: Note to self, when walking away from a reply check to see if it is still needed before sending some mins later.
Click to expand...

+rep was given to both of you anyway. Thanks!
 
I have searched through the forums and good old google and have found many answers but non seem to work on my page. Anyway here is the question, I have 2 divs that are positioned side by side, and I wish to get rid of the whitespaceI want to the black from the "link 1" to join to the main content in the center, Any help would be greatly appreciated,
 
"As for absolute positioning, when I started using floats to position everything within #wrapper it got all fucked up and I got pissed and just arranged them in absolute since it seemed to be the easiest - Is there any down-side to absolute positioning?"

This was me in the beginning.

Getting pissed now is nothing compared to the insanity of having to adjust nearly every div on a page manually because the width or height of just one element changed. If you stay in the game you will learn how to float or you will quadruple the edit time on a page.

Getting your head around how the "clear:" property works and making sure the combined widths of all adjacent divs do not exceed the width of their container will help a lot.
 
Uptime said:
"As for absolute positioning, when I started using floats to position everything within #wrapper it got all fucked up and I got pissed and just arranged them in absolute since it seemed to be the easiest - Is there any down-side to absolute positioning?"

This was me in the beginning.

Getting pissed now is nothing compared to the insanity of having to adjust nearly every div on a page manually because the width or height of just one element changed. If you stay in the game you will learn how to float or you will quadruple the edit time on a page.

Getting your head around how the "clear:" property works and making sure the combined widths of all adjacent divs do not exceed the width of their container will help a lot.
Click to expand...

Point taken. I'll switch the site over to use floats so I can learn how to use them from early on - I already see how big of a pain in the ass it is to change everything's size when I shift something by just 1px.

imkazu said:
ah, h3 margins
its a good practice to use css reset (yui) for max compatibility across browsers
YUI 2: Reset CSS

this should strip spacing/padding from the common elements.
Click to expand...

Thanks for the resource, will be using this in all my future pages. +rep

TigerUK said:
outsource that shit to fiverr
Click to expand...

When I make enough money (or should I say profit) to reinvest by outsourcing all design/coding I will make a boobs thread including parts of my "private" collection :xmas-smiley-030:.

Until then gotta do it myself, don't want to go even deeper in the red. Besides it's for my portfolio site I want that shit looking as I want it, even if it turns out ugly.
 
You can also consider using normalize.css instead of a full blown reset... Normalize.css: Make browsers render all elements more consistently. This is what HTML5Boilerplate is using now instead of a reset and it works really well.

Also consider purchasing the HTML5 for Web Designers and the CSS3 for Web Designers books from A Book Apart... A Book Apart, Welcome The Mobile First and Responsive Web Design titles are also well worth a read.
 
  • Like
Reactions: nickCR
if you are going to use absolute postioning, the parent div should be using relative positioning.

#wrapper { position:relative; width:750px; height:475px; margin: 0 auto; border: 1px solid #008000; background-color: #f3f3f3; }
 
bhanks said:
if you are going to use absolute postioning, the parent div should be using relative positioning.

#wrapper { position:relative; width:750px; height:475px; margin: 0 auto; border: 1px solid #008000; background-color: #f3f3f3; }
Click to expand...

THIS

You'd always put an absolute positioned element nested into a relative positioned element because absolute elements are go out of default static document flow and you need a relative element as reference.
Apart this, I'd use absolute elements only for particular SEO optimized part of a page.
 
I wouldn't use absolute position unless it's on something that you need in a specific place.

Float is the way to go, but there are some layouts that not even float can resolve.

Anyway I was going to suggest a full reset with * { margin: 0px; padding: 0px; } but the HTML5 boilerplate is actually what I use now and I like it +rep on that.
 
Lots of useful info thanks.

When floating say 3 divs is there any way to specify which div goes in the middle? Right now I'm creating a lot of divs and it just seems like there's a better way to go about floating everything.
 
Jay.s said:
Lots of useful info thanks.

When floating say 3 divs is there any way to specify which div goes in the middle? Right now I'm creating a lot of divs and it just seems like there's a better way to go about floating everything.
Click to expand...

You should consider a grid system man, like 960.gs or a modified version of it like those you can generate at Grid System Generator These will take care of all your floats and present a nice visual structure for your sites. I use a modified 12 column grid that is 984px wide but am currently dabbling with responsive sites for mobile devices.

If you float 3 divs in a row, the second one in the code will be the second one on the page.

If you want to float 3 divs beside each other and then control which comes first in the code for SEO purposes, this can be done with negative and positive margins. So for example if you want the second div to appear first in the code and each is 300 pixels wide, you would give the second div -300 px of left margin and the first div +300 px of left margin to reverse their visual locations on the page.

Anyways, look at the grid systems, they'll help your layouts immensely.
 
Fatbat said:
You should consider a grid system man, like 960.gs or a modified version of it like those you can generate at Grid System Generator These will take care of all your floats and present a nice visual structure for your sites. I use a modified 12 column grid that is 984px wide but am currently dabbling with responsive sites for mobile devices.

If you float 3 divs in a row, the second one in the code will be the second one on the page.

If you want to float 3 divs beside each other and then control which comes first in the code for SEO purposes, this can be done with negative and positive margins. So for example if you want the second div to appear first in the code and each is 300 pixels wide, you would give the second div -300 px of left margin and the first div +300 px of left margin to reverse their visual locations on the page.

Anyways, look at the grid systems, they'll help your layouts immensely.
Click to expand...

Thanks for another great resource that'll I'll definitely be using in future layouts. Really appreciate your help, I think that about solves all the problems I had.
 
You must log in or register to reply here.
Top Bottom