Jump to content

[Solved] A Few Css Issues


damiancds
 Share

Recommended Posts

My setup is this,I have an all div that contains everything, for basically the background outside of the main contentthen a main div, basically the content of the page so it's set to a width of 800 and centered in the pagein the main div, I have a header, sidebar, content, and footer div.both the header and footer are separated into their own includesmy page is set up like this:________________________________| b | Header | b || a |_______________ | a || c | S | | c || k | i | content | k || g | d | | g || r | e | | r || o | | | o || u |____|__________ | u || n | footer | u ||__d___ |_______________ |__d___ |It's a little messy I know, I ###### at ascii art, if you can call this that.but my point, right now my sidebar only goes down to about the 'i' where i'd like it to match the height of the content part.also, I'd like to know how to make it so that everything is stretched to at least the bottom of the page.Another thing, right now, there's a white space all around my page, background and all, how do I get rid of thatif anyone can help me with at least one if these issues, it'd be greatly appreciated, thanks

Edited by damiancds
Link to comment
Share on other sites

Heights are hard. There are a couple tricks.The first is to organize things the reverse of expectation. Two divs can look like they are side by side, when in fact one contains the other. Call them the outer div and the inner div. If you want a "short" div to be as tall as the taller div, then the taller div should be the inner div. As it grows and shrinks, it will force the outer div to grow and shrink along with it. This will make them the same height. That would look a little like this:

----------------------|-----------------   ||				|   ||				|   ||				| o ||				| u ||				| t ||  inner		 | e ||				| r ||				|   ||				|   ||				|   ||				|   ||				|   ||-----------------   |----------------------

Another solution is to give your container element the same background as the short element. This creates the illusion that the short element is as tall as the container.

Edited by Deirdre's Dad
Link to comment
Share on other sites

sorry about that ascii thing, I forgot about it not showing spacing,I just found/tried the min-height setting in css and it seemed to work right, though not quite liquid.Is there any downsides to using that, like cross-browser problems and what not.also, I can't seem to figure out how to have my background tile from top to bottom and edge to edge. right now, there's about a 10 pixel white border around all sides.

Link to comment
Share on other sites

You have to add this to your stylesheet to remove the white edges from your page.
html,body {  margin: 0;  padding: 0;}

It worked perfectly, but not on the top and bottom edges, only on the sides.thanks,
Link to comment
Share on other sites

I tried the extra zero, to both and nothing happened.then I added a comma, because I wasn't sure, but that negated it so it wasn't syntactily correct.I even tried adding up to four zero's but that didn't work either.just to see i figured i'd try margin-top: 0; and padding-top: 0; but nothing on those either

Link to comment
Share on other sites

try adding another 0 to each one (margin, padding)margin: 0 0padding: 0 0
Why would you suggest that? If there's one value, the value is applied to all sides. If there are two values, the first is applied to the top and bottom, the second is applied to the left and right. You could also put margin: 0 0 0 0; and it wouldn't make a difference either.
Link to comment
Share on other sites

Why would you suggest that? If there's one value, the value is applied to all sides. If there are two values, the first is applied to the top and bottom, the second is applied to the left and right. You could also put margin: 0 0 0 0; and it wouldn't make a difference either.
live and learn, as they say... :)
Link to comment
Share on other sites

  • 1 month later...

I suppose you could consider it solved, as I found a solution earlier today.Honestly, I don't know why I didn't do it earlier, but i just set the margin-top and bottom properties of the body to negative and it brought the top to the top and the bottom to the bottom.that's it, i guess

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...