Go Premium for a chance to win a PS4. Enter to Win

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 285
  • Last Modified:

HTML: CREATING A DIV WITH MULTIPLE ROWS & COLUMNS

Hello

The diagram attached shows how I want the DIVS to look like. My current code looks like this but pushes everything below it by 200 px.

What is wrong with my code:

<div id="header">
        <div id= "header_logo"></div>
        <div id= "header_blank"></div>
    <div id = "header_phone"></div>
    <div id= "header_menu">
      <form id="form1" name="form1" method="get" action="">
        <select name="language" id="language" onchange="setLanguage()">
      </select>
        <label for="language"></label>
     
  </form>
  </div>
 </div><!-- end header -->

#header{
      width:1014px;
      height:100px;
      margin:0 auto;
      padding:0;
      position:relative;
      text-align:left;
      left:50%;
         margin-left: -507px; /* 50% of the div's width*/
      clear:both;
}
#header_logo{
      background: url(../images/template/header_bg.png) no-repeat;background-position:center;  
      width:350px;
      height:100px;
      margin:0 auto;
      padding:0;
      position:relative;
      text-align:center;
      float: left;
}

#header_blank{
      width:332px;
      height:100px;
      float:left;
}
#header_phone{
      background: url(../images/template/Telephone.png) no-repeat;background-position:right;
      width:332px;
      height:70px;
      float:left;
}
#header_menu{
      width:332px;
      height:300px;
      margin:0 auto;
      padding:0;
      position:relative;
      text-align:right;
      float: left;

}
HEADERPLAN.JPG
0
adimit19
Asked:
adimit19
  • 10
  • 7
1 Solution
 
Tom BeckCommented:
It's the height you have set for #header_menu. You have 300px but you should have 30px.
0
 
adimit19Author Commented:
still didn't work after changing height to 30px
0
 
Tom BeckCommented:
I don't understand what you mean by "still didn't work". What could not be working? It's a very basic layout.
0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
Tom BeckCommented:
I find it helpful to temporarily put background colors in the divs so I can see the space they consume. I have added content below the header as well. Here's the results of my test.
basicLayout.jpg
0
 
adimit19Author Commented:
when I place content below the header, the content below the header goes on top of the header, and the header divides into 4 columns each beside each other instead of the layout you get. Can you give me the code you used to place the content below the header?
0
 
Tom BeckCommented:
This is the markup used to create the page depicted in the posted jpg image. It tested fine in Chrome and Firefox. It was a little off in IE8 though, but not as you describe.
<html>
<head>
<style>
#header{
      width:1014px;
      height:100px;
      margin:0 auto;
      padding:0;
      position:relative;
      text-align:left;
      left:50%;
         margin-left: -507px; /* 50% of the div's width*/
      clear:both;
}
#header_logo{
      background: url(media/blue75.jpg) repeat;
      background-position:center;  
      width:350px;
      height:100px;
      margin:0 auto;
      padding:0;
      position:relative;
      text-align:center;
      float: left;
}

#header_blank{
      width:332px;
      height:100px;
      float:left;
      background-color:#def
}
#header_phone{
      background: url(media/red75.jpg) repeat;
      background-position:right; 
      width:332px;
      height:70px;
      float:left;
}
#header_menu{
      width:332px;
      height:30px;
      margin:0 auto;
      padding:0;
      position:relative;
      text-align:right;
      float: left;
      background-color:#fed

}
#content{
    background-color:#edf;
    width:974px;
    height:400px;
    padding:20px;
    position:relative;
    left:50%;
    margin-left: -507px; /* 50% of the div's width*/
}
</style>
<script type="text/javascript">

</script>
</head>
<body>
<div id="header">
        <div id= "header_logo"></div>
        <div id= "header_blank"></div>
    <div id = "header_phone"></div>
    <div id= "header_menu">
      <form id="form1" name="form1" method="get" action="">
        <select name="language" id="language" onchange="setLanguage()">
      </select>
        <label for="language"></label>
     
  </form>
  </div>
 </div><!-- end header -->
 <div id="content">sdhjips sapasiduyy uays aysp siudy asiuyddfpiuasydd fiuausydd fiuuasydiduyf sdiuuyas ddfiuyas diduyaysduyaisyydyay sdiasyd  fya sdyaiosy dfoy ais difyywiaysyfy7wy f aywyfiyaiw4yfiay487a3wfusyfpy</div>
</body>
</html>

Open in new window

0
 
Tom BeckCommented:
If I were doing the layout myself, I would probably do the following markup and css. This corrects the problems with IE.
<html>
<head>
<style>
* {margin:0 auto;padding:0}
body {text-align:center}
#header{
      width:1014px;
      height:100px;
      text-align:left
}
#header_logo{
      background: url(media/blue75.jpg) repeat;
      background-position:center;  
      width:350px;
      height:100px;
      float: left;
}

#header_blank{
      width:332px;
      height:100px;
      float:left;
      background-color:#def
}
#header_phone{
      background: url(media/red75.jpg) repeat;
      background-position:right; 
      width:332px;
      height:70px;
      float:left;
}
#header_menu{
      width:332px;
      height:30px;
      text-align:right;
      float: left;
      background-color:#fed

}
#content{
    background-color:#edf;
    width:1014px;
    height:400px;
}
#content p{
    padding:20px
}
</style>
</head>
<body>
<div id="header">
        <div id= "header_logo"></div>
        <div id= "header_blank"></div>
    <div id = "header_phone"></div>
    <div id= "header_menu">
      <form id="form1" name="form1" method="get" action="">
        <select name="language" id="language" onchange="setLanguage()">
      </select>
        <label for="language"></label>
     
  </form>
  </div>
 </div><!-- end header -->
 <div id="content"><p>sdhjips sapasiduyy uays aysp siudy asiuyddfpiuasydd fiuausydd fiuuasydiduyf sdiuuyas ddfiuyas diduyaysduyaisyydyay sdiasyd  fya sdyaiosy dfoy ais difyywiaysyfy7wy f aywyfiyaiw4yfiay487a3wfusyfpy</p></div>
</body>
</html>

Open in new window

0
 
adimit19Author Commented:
What is happening to me now is that the contents of #header_phone are not showing up in any web browser. I am using dreamweaver to develop, and everything ooks fine in dreamweaver live view. Don't know what else to try.
0
 
Tom BeckCommented:
What is the content? Post the current markup and css and I can try to help.
0
 
adimit19Author Commented:
here is what is happening now. The header div is not centering for some reason in any browser. Here is my code:

#header{
      width:1014px;
      height:100px;
      text-align:left;
        left: 50%;
        margin-left: -507px; /* center div */
      
}
#header_logo{
      background: url(../images/template/header_bg.png) no-repeat;
      background-position:center;  
      width:350px;
      height:100px;
      float: left;
}

#header_blank{
      width:332px;
      height:100px;
      float:left;
}
#header_phone{
      background: url(../images/template/Telephone.png) no-repeat;
      background-position:right;
      width:332px;
      height:70px;
      float:left;
}
#header_menu{
      width:332px;
      height:30px;
      text-align:right;
      float: left;
}
0
 
Tom BeckCommented:
Take a look at my last post where I have
* {margin:0 auto;padding:0}
body {text-align:center}
as the first two css definitions. This sets the foundation for creating a web page where all content is centered in the browser window in all modern browsers. The next step is to create a "wrapper" div that is the full width of your content. Inside of that div, create additional divs to divide up the space inside the wrapper as needed.

The way you are doing it will drive you crazy because you must position each div relative to the edges of the browser window whereas with the method I have demonstrated, every div is placed relative to the edges of the wrapper div which you have already centered in the browser window. It's foolproof and industry standard.
0
 
adimit19Author Commented:
in that case I incorporated your recommendations. The body tag has the commands you specified. My first level DIv is header. It is a wrapper containing other DIV's. Still can't get it to center:

body{
      /* background: url(../images/template/Body_BK3.png) repeat; */      
      font-family:"Myriad Pro";
      margin:0 auto;
      padding:0;
      text-align:center;
}


/* ############################### HEADER ############################### */
#header{
      width:1014px;
      height:100px;
      text-align:center;
      
}
#header_logo{
      background: url(../images/template/header_bg.png) no-repeat;
      background-position:center;  
      width:350px;
      height:100px;
      float: left;
}

#header_blank{
      width:332px;
      height:100px;
      float:left;
}
#header_phone{
      background: url(../images/template/Telephone.png) no-repeat;
      background-position:right;
      width:332px;
      height:70px;
      float:left;
}
#header_menu{
      width:332px;
      height:30px;
      text-align:right;
      float: left;
}

#top_banner{
      clear:both;
      background: url(../images/template/WebSiteBanner.png) no-repeat;background-position:center;
      width:1014px;
      height:80px;
      margin:0 auto;
      padding:0;
      text-align:left;
}

HTML:
<body onload="addLanguages()";>
<form name="frmLang" method="get"><input type="hidden" id="selectedLanguage" name="selectedLangauge"/></form>
<div id="header">
      <div id= "header_logo"></div>
    <div id="header_blank"></div>
    <div id="header_phone"></div>
  <div id= "header_menu">
      <form id="form1" name="form1" method="get" action="">
        <select name="language" id="language" onchange="setLanguage()">
      </select>
        <label for="language"></label>
     
  </form>
  </div>
 </div><!-- end header -->
</div><!-- end body -->
0
 
Tom BeckCommented:
Not quite what I recommended.

This should be your first two definitions.

* {margin:0 auto;padding:0}
body{
      /* background: url(../images/template/Body_BK3.png) repeat; */      
      font-family:"Myriad Pro";
      text-align:center;
}

Body is not the top level element on the page, it's html, so setting body margin:0 auto is not the same as setting everything to margin:0 auto as I have done. Alternately you could set just the top level item like this:

html {margin:0 auto}

If you like the gap at the top, you can create it:

* {margin:10px auto 0 auto}

Your header can be considered a wrapper if you intend on putting your content inside that  otherwise you should have a top level div that contains both the header and the content divs.
0
 
adimit19Author Commented:
now there should be nothing wrong, but the header still does not center. Code below

</head>
<body onload="addLanguages()";>
<div id="header">
      <div id="header_logo"></div>
    <div id="header_blank"></div>
    <div id="header_phone"></div>
        <div id="header_menu">
      <form id="form1" name="form1" method="get" action="">
              <select name="language" id="language" onchange="setLanguage()">
            </select>
              <label for="language"></label>
        </form>
        </div>
 </div><!-- end header wrapper -->
 </body><!-- end body -->
 </head><!-- end header -->


html {margin:10px auto}
body{
      /* background: url(../images/template/Body_BK3.png) repeat; */      
      font-family:"Myriad Pro";
      text-align:center;
}


/* ############################### HEADER ############################### */
#header{
      width:1014px;
      height:100px;
      text-align:center;
      
}
#header_logo{
      background: url(../images/template/header_bg.png) no-repeat;
      background-position:center;  
      width:350px;
      height:100px;
      float: left;
}

#header_blank{
      width:332px;
      height:100px;
      float:left;
}
#header_phone{
      background: url(../images/template/Telephone.png) no-repeat;
      background-position:right;
      width:332px;
      height:70px;
      float:left;
}
#header_menu{
      width:332px;
      height:30px;
      text-align:right;
      float: left;
}
0
 
Tom BeckCommented:
You're right, html {margin:10px auto} does not work.

Why are you resistant to using * ?

Web browsers add their own default padding and margins. That's why I always start with
* {margin:0 auto; padding:0}
so I can have complete control of the styling. Troubleshooting misalignment of elements on any page that does not start the css like that can be a nightmare. There's typically 5px of padding by default but it can vary from browser to browser. The divs you have inside the header div, for example, will not fit unless the padding is specifically set to zero. Why do that for every container? Just set it to zero on everything at the outset and add padding where needed.
0
 
adimit19Author Commented:
thanks it works. I didn't resist the *. Just didn't understand it fully. Now all is well. Thanks for all of your help. I truly appreciated it.
0
 
Tom BeckCommented:
Thanks for the points.

I've been researching why html{margin:10px auto} does not work. I've found that it works in some browsers but not all. Never tried it before, but always assumed it would work. Apparently, styling the html element directly is hit or miss across the board. Some definitions work, some don't. I never knew that. See, you learn something new every day.
0

Featured Post

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

  • 10
  • 7
Tackle projects and never again get stuck behind a technical roadblock.
Join Now