Simple CSS help required

8 replies
  • WEB DESIGN
  • |
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.
#css #required #simple
  • Profile picture of the author htmlthis
    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 *.
    {{ DiscussionBoard.errors[8246871].message }}
    • Profile picture of the author IMstarter
      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?
      {{ DiscussionBoard.errors[8246887].message }}
  • Profile picture of the author htmlthis
    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.
    {{ DiscussionBoard.errors[8246895].message }}
  • Profile picture of the author htmlthis
    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
    {{ DiscussionBoard.errors[8246930].message }}

Trending Topics