Simple CSS help required

by 8 replies
9
I am trying to make a box that is 100% width and currently undetermined height of pixels.

The thing is my code at the top of the css file is:

Code:
*{
	margin: 0px;
	padding: 0px;	
	background: #FFF;
}
I imagine that this shrinks the size of the box until it reaches the height of the text.

Is there a way that I can continue to use the above text but have it stop half way in the doc??

Here is the current full code:

Code:
*{
	margin: 0px;
	padding: 0px;	
	background: #FFF;
}
#big_wrapper{
	text-align: center;
	
}

h1{
	font: bold 26px Tahoma;
	font-weight:normal;
	
}

h2{
	font: bold 20px Tahoma;
	font-weight:normal;
}
	
h3{
	font: bold 20px Tahoma;
	font-weight:normal;
}
	
#logo {
	width:100%;
	height: 5%;
	background-color: blue;
}
Haven't done this for a while so I keep making silly little mistakes only to figure them out a few minutes later.
#website design #css #required #simple
  • I'm not sure on what you're trying to accomplish, but the * is called the universal selector and it basically applies all the rules defined there to all of the elements. In this case it sets the padding and margin to 0 and also applies the white background to all of the elements in the document tree.
    You can overwrite it with any other rule, if that's what you're asking. For instance, the #logo selector is overwriting the background color set with the *.
    • [1] reply
    • well basically I would like the box to be 100% wide and say 10% high. But with the universal indicator it means that the box is 100% wide but shrinks to fit around the text i.e. it is not 10% high.

      Is there a way I can overwrite to make is 10% high?
  • Oh, I just realized what you were asking. You don't need to specify a height in order to accomplish that. Just set the width and leave the height empty. If you want to use percentages for height it is a little tricky, it is rarely used because of poor browser support.
  • I digged up an example I worked on 4 years ago. It uses height as percentages.

    Practice Butler

    In order to make it work with percentages, you will need to set min-height:100%;
    on the body and a height:100% on the main container wrapper.

    This explains it better though:

    CSS - percentage height - Stack Overflow
    • [ 1 ] Thanks
    • [1] reply
    • Thank you for the examples. I understand why it isn't showing the height. But I am not sure where exactly the code should go. I managed to get the height of the blue box perfect but then the whole page height was 100% so there were huge gaps between the headers.
      • [1] reply
Join the discussion

Next Topics on Trending Feed