div css control

Collapse
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • TheServant
    Recognized Expert Top Contributor
    • Feb 2008
    • 1168
    #1

    div css control

    I am trying to re-do everything on my site so it is all neat and organized code, which includes re-doing my css. I have realized a problem that can be overcome in other ways but it would be easier if I could do it here.
    Here is some of my css:
    Code:
    body {
	font: 12px Verdana, Arial, Helvetica, sans-serif;
	background: #000000 url(top_bg.png) repeat-x;
	height: 100%;
	width: 1024px;
	margin: 0 auto;
	padding: 0;
	behavior: url("../csshover3.htc");
}
		#header {
			width: 100%;
			margin: 0;
			padding: 0;
			background: silver;
			text-align: center;
		}
		#content_wrapper {
			height: 100%;
			width: 1000px;
			margin: 20px 0;
			padding: 10px;
			border: gray groove 2px;
			background: silver;
			display: block;
			overflow: hidden;
		}
				#left_menu {
					height: 100%;
					width: 150px;
					float: left;
					padding: 5px;
					border: black groove 2px;
				}
				#content {
					width: 668px;
					float: left;
					padding: 0;
					border: black groove 2px;
				}			
		#footer {
			width: 1000px;
			margin: 0;
			padding: 5px 12px;
			background: silver;
		}
    Firstly, my div's (#left_menu and #content) are not 100% height. Everywhere just says make sure the body and parent div is height 100% and all is good, however this is not working in my case.

    Second, I have noticed a very annoying problem which is if I have padding / borders / margins and use width 100% / height 100% it simply adds it on to the body width / height. Let me explain: The body is 1024px. If I have the #header width as 100% it works fine. If I add a 2px border it is 1028px wide (100% + 4px). Is there a way to have the 100% include the 2px, or do you have to do nested div statements?

    Thanks for your help.
    Tags: None
    • drhowarddrfine
      Recognized Expert Expert
      • Sep 2006
      • 7434
      #2
      So body is 100% of what? You need to set html to 100%, also.

      'width' is the width of the content. Borders, margin and padding are outside the width.

        Comment

        • TheServant
          Recognized Expert Top Contributor
          • Feb 2008
          • 1168
          #3
          OK, so there is no easy way to have one width for the body, or html, and the rest is done automatically when the rest includes borders, padding and margins?

          And just a quick note: The editor I am using (phpDesigner) doesn't recognise html as a css class like it does body? Is html a normal class to define? And besides using minheight (I can never get it to work in IE) can something else be done to height to use it like that?

            Comment

            • drhowarddrfine
              Recognized Expert Expert
              • Sep 2006
              • 7434
              #4
              I just set html,body{heigh t:100%} in my css. Originally, IE would not allow setting styles on <html> but I think that's fixed in IE7.

              Up through IE6, min-height did not work and IE treated height as min-height. But that's IE for you. IE7 still screws it up when it's combined with height.

              Google for Diaz min-height hack.

                Comment

                • TheServant
                  Recognized Expert Top Contributor
                  • Feb 2008
                  • 1168
                  #5
                  Thanks for your help, I will have a look.

                    Comment

                    • TheServant
                      Recognized Expert Top Contributor
                      • Feb 2008
                      • 1168
                      #6
                      Hey, been working on this but it’s constantly got issues:
                      Code:
                       html,body {
	min-height: 500px;
	height: auto !important;
	height: 100px;
	width: 1024px;
	margin: 0 auto;
	padding: 0;
}
		#content_wrapper {
			height: 100%;
			width: 1000px;
			margin: 10px 0;
			padding: 10px;
			border: gray groove 2px;
			background: silver url(content_bg_dark.gif) repeat;
			display: block;
		}
				#left_menu {
					height: 100%;
					width: 150px;
					float: left;
					padding: 10px 5px;
					border: gray groove 2px;
					text-align: center;
					background: silver url(menu_bg.png) repeat-y;
				}
				#content {
					height: 100%;
					width: 648px;
					float: left;
					padding: 10px;
					border: gray groove 2px;
					background: silver url(content_bg.gif) repeat;
				}
						#news_bar {
							width: 618px;
							border: gray groove 2px;
							background: black;
							color: red;
							padding: 0 10px;
							margin: 0 auto;
							text-align: center;
						}
						#inner_content {
							width: 618px;
							margin: 10px 0 auto;
							padding: 5px;
							text-align: left;
						}
				#right_menu {
					height: 100%;
					width: 150px;
					float: right;
					padding: 10px 5px;
					border: gray groove 2px;
					text-align: center;
					background: silver url(menu_bg.png) repeat-y;
				}
                      The page is as follows:
                      Code:
                      <body>
	<div id="content_wrapper">
		<div id="left_menu">
			<p>Left Menu</p>
		</div>
		<div id="content">
			<div id="news_bar">
				<p>News Bar</p>
			</div>
			<div id="inner_content">
				<p>Inner Content<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />This is a word.</p>
			</div>
		</div>
		<div id="right_menu">
			<p>Right Menu</p>
		</div>
	</div>	
</body>
                      Now the problem is: The height fix works very well, provided that the height of the contents (for example #inner_content) does not exceed the height specified in the body definition at the top (100px). If it does, the left and right menu do not size along with the #content, and #content just gets bigger while #left and #right menu stay the same height as the parent definition (100% = 100px) which is what I have told it to do.

                      Is there a way to have them resize along with the rest of the contents (ie. #content)?

                        Comment

                        • drhowarddrfine
                          Recognized Expert Expert
                          • Sep 2006
                          • 7434
                          #7
                          Does all that height stuff have to be in there for any reason? I took it all out and just added 'height:100%'.

                            Comment

                            • TheServant
                              Recognized Expert Top Contributor
                              • Feb 2008
                              • 1168
                              #8
                              If you're talking about the body tag then yes. That was Diaz's fix. When I get home I will check it on all browsers to see if it can be just height: 100%;

                              And if you mean individual tags, then yes the height value must be passed on between parents otherwise it will be defaulted to auto I think and lose the body height. Is my question clear?

                                Comment

                                • TheServant
                                  Recognized Expert Top Contributor
                                  • Feb 2008
                                  • 1168
                                  #9
                                  Just height 100% works fine on all browsers, but I haven't tried IE6. So does anyone have a suggestion as to how I could solve my problem?

                                    Comment

                                    • David Laakso
                                      Recognized Expert Contributor
                                      • Aug 2008
                                      • 397
                                      #10
                                      You could help solve our problem by putting your page on your server and pointing to it in your post. Trying to guess what you want based on markup and confused CSS is a waste of everyone's time, imo.

                                      Notes on the file. Tested in compliant browsers and IE 6/7. If it ain't what you want, tell us what needs to change.

                                      Please see:
                                      The best Studio in the world – Chelsea Creek Studio
                                      http://www.chelseacreekstudio.com/ca/cssd/test-108.html

                                        Comment

                                        • TheServant
                                          Recognized Expert Top Contributor
                                          • Feb 2008
                                          • 1168
                                          #11
                                          Sure: My site.
                                          The problem is, I have 3 columns in the middle div and they are not all the same height. I want them all the same height.
                                          If there are any PHP errors, ignore them, this is the test site, so just look at the layout and CSS.

                                            Comment

                                            • David Laakso
                                              Recognized Expert Contributor
                                              • Aug 2008
                                              • 397
                                              #12
                                              Read the article and follow the three column tutorial on this page (faux columns created using a repeating image):
                                              Creating Liquid Layouts with Negative Margins
                                              http://www.alistapart.com/articles/negativemargins
                                              Two- and three-column, liquid page designs with header and footer are easy to dash off using old-school HTML table layout methods. Designing them in CSS is trickier, and can sometimes even require …

                                              Or try the "equal height columns" method (using only CSS to create equal height column), here:
                                              Page not found - Position Is Everything
                                              http://www.positioniseverything.net/articles/onetruelayout/

                                              Or boggle your mind and see the "companion column method," here:
                                              404 Not Found
                                              http://www.satzansatz.de/cssd/companions.html

                                                Comment

                                                • TheServant
                                                  Recognized Expert Top Contributor
                                                  • Feb 2008
                                                  • 1168
                                                  #13
                                                  Thanks for your help mate, I will read up and come back if I have any more questions.

                                                    Comment

                                                    • drhowarddrfine
                                                      Recognized Expert Expert
                                                      • Sep 2006
                                                      • 7434
                                                      #14
                                                      I don't understand. You said just height 100% fixed the problem. In the site you linked to, you didn't add height:100% to html.

                                                        Comment

                                                        • TheServant
                                                          Recognized Expert Top Contributor
                                                          • Feb 2008
                                                          • 1168
                                                          #15
                                                          If i change the html tag to 100% all it does is get my screen size and make my page that big. I want a dynamic one, however I think that because the middle content divs which I would like to be made the same height are not working because they are floating. I did not find that those previous articles answered my problem, but it was interesting anyway.

                                                            Comment

                                                            Previous template Next
                                                            Working...