Solved

HTML: CREATING A DIV WITH MULTIPLE ROWS & COLUMNS

Posted on 2012-03-12
17
235 Views
Last Modified: 2012-08-14
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
Comment
Question by:adimit19
  • 10
  • 7
17 Comments
 
LVL 38

Expert Comment

by:Tom Beck
ID: 37709230
It's the height you have set for #header_menu. You have 300px but you should have 30px.
0
 

Author Comment

by:adimit19
ID: 37709264
still didn't work after changing height to 30px
0
 
LVL 38

Expert Comment

by:Tom Beck
ID: 37709367
I don't understand what you mean by "still didn't work". What could not be working? It's a very basic layout.
0
 
LVL 38

Expert Comment

by:Tom Beck
ID: 37709410
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
 

Author Comment

by:adimit19
ID: 37709428
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
 
LVL 38

Expert Comment

by:Tom Beck
ID: 37709940
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
 
LVL 38

Expert Comment

by:Tom Beck
ID: 37709987
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
 

Author Comment

by:adimit19
ID: 37709991
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
Maximize Your Threat Intelligence Reporting

Reporting is one of the most important and least talked about aspects of a world-class threat intelligence program. Here’s how to do it right.

 
LVL 38

Expert Comment

by:Tom Beck
ID: 37710020
What is the content? Post the current markup and css and I can try to help.
0
 

Author Comment

by:adimit19
ID: 37710144
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
 
LVL 38

Expert Comment

by:Tom Beck
ID: 37710333
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
 

Author Comment

by:adimit19
ID: 37710565
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
 
LVL 38

Expert Comment

by:Tom Beck
ID: 37710662
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
 

Author Comment

by:adimit19
ID: 37710828
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
 
LVL 38

Accepted Solution

by:
Tom Beck earned 500 total points
ID: 37710948
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
 

Author Comment

by:adimit19
ID: 37710968
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
 
LVL 38

Expert Comment

by:Tom Beck
ID: 37711119
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

How to improve team productivity

Quip adds documents, spreadsheets, and tasklists to your Slack experience
- Elevate ideas to Quip docs
- Share Quip docs in Slack
- Get notified of changes to your docs
- Available on iOS/Android/Desktop/Web
- Online/Offline

Join & Write a Comment

Suggested Solutions

This article discusses four methods for overlaying images in a container on a web page
Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

747 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

9 Experts available now in Live!

Get 1:1 Help Now