Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Rhinorhino on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Help with grid layout 1

Status
Not open for further replies.
d0nny

d0nny

IS-IT--Management
Joined
Dec 18, 2005
Messages
278
Location
GB
Hi

Can anyone help with the following grid layout I need?
Grid Layout

I've been struggling with this all day and I now give up.
Help and advice gratefully accepted.
 
Sort by date Sort by votes
Seems to be straight forward enough. What's giving you the trouble?

My advice would be to break it down into sections, and code one section at a time. Also stay away from positioning. The layout can be accomplished without it very simply.

For instance, code the outer most area first, that include the header, the nav bar and the content region, but don't mess around with the areas inside the content yet. Once the outer setup works and is as you want it, you can move into the content area.

Try this for now:
Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "[URL unfurl="true"]http://www.w3.org/TR/html4/loose.dtd">[/URL]

<html>

   <head>
      <title>Hotel</title>
      <style type="text/css">
#container{
background-color:#EE55A5;
width:650px;
height:800px;
margin-left:auto;
margin-right:auto;
}

#header1{
background-color:#FF0088;
height:60px;
width:99%;
margin-left:auto;
margin-right:auto;

}
#header2{
background-color:#00FF88;
height:60px;
width:99%;
margin-left:auto;
margin-right:auto;
}
 
#nav{
background-color:#FFAA22;
float:left;
width:200px;
height:670px;
margin-left:5px;
margin-right:auto;
}

#content{
background-color:#AAAAAA;
float:left;
width:440px;
height:670px;
}

     </style>
   </head>

   <body>
<div id="container">
 <div id="header1">Header 1</div>
 <div id="header2">Header 2</div>
 <div id="nav">Nav</div>
 <div id="content">Content</div>

</div>
   </body>
</html>

BTW, it does indeed validate (except for 2 warnings about missing the character encoding tag)

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.
 
Upvote 0 Downvote
What gives me the most trouble is the the stuff you didn't refer to and that is the 'boxes' in the content area.
I think I have my basic layout, but the layout within the content area is very troublesome, I find.

The problem I get is separating the top half and the bottom half.
For example, if Content1 increases in size, I want Content2 and Content3 to remain on the right side and the Content4 and 5 boxes remain below these 3 content boxes.
 
Upvote 0 Downvote
Separate your contents sections in two.

since Content 1-3 need to work together they'll be in one section, and content 4 and 5 along with the footer can be in another section. That way the box holding contents 1-3 will be the one pushing 4 and 5 down.

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "[URL unfurl="true"]http://www.w3.org/TR/html4/loose.dtd">[/URL]

<html>

   <head>
      <title>Hotel</title>
      <style type="text/css">
#container{
background-color:#888888;
width:1000px;
min-height:800px;
margin-left:auto;
margin-right:auto;
}

#header1{
background-color:#FF0088;
height:60px;
width:99%;
margin-left:auto;
margin-right:auto;

}
#header2{
background-color:#00FF88;
height:60px;
width:99%;
margin-left:auto;
margin-right:auto;
}
 
#nav{
background-color:#FFAA22;
float:left;
width:200px;
height:670px;
margin-left:5px;
margin-right:auto;
}

#content{
background-color:#CCCCCC;
float:left;
width:790px;
min-height:600px;
}

#cheader{
min-height:60px;
background-color:#FFFFFF;
color:#FF3399;
}

#contentbar1{
width:100%;
min-height:50%;
}

#content1{
float:left;
width:60%;
background-color:#00FF00;
}

#content23{
float:left;
width:39%;
height:100%;
}

#content2{
height:40%;
background-color:#0055FF;
}

#content3{
height:60%;
background-color:#00AAFF;
}

#contentbar2{
clear:both;
height:34%;
background-color:#FFFFFF;
}

#content4{
float:left;
height:100%;
width:60%;
background-color:#4444FF;

}
#content5{
float:left;
height:100%;
width:39%;
background-color:#8888FF;

}
#footer{
clear:both;
background-color:#FFFFFF;
}
     </style>
   </head>

   <body>
<div id="container">
  <div id="header1">Header 1</div>
  <div id="header2">Header 2</div>
  <div id="nav">Nav</div>
  <div id="content">
     <div id="cheader">Content Header</div>
     <div id="contentbar1">
       <div id="content1">Content 1<br><br><br><br><br><br>Many lines of content<br><br><br><br><br>More content<br><br><br><br>etc...<br><br><br><br><br><br><br><br><br>Many lines of content<br><br><br><br><br>More content<br><br><br><br>etc...<br><br><br><br><br><br><br><br><br>Many lines of content<br><br><br><br><br>More content<br><br><br><br>etc...<br><br><br><br><br><br><br><br><br>Many lines of content<br><br><br><br><br>More content<br><br><br><br>etc...<br><br><br><br><br><br><br><br><br>Many lines of content<br><br><br><br><br>More content<br><br><br><br>etc...<br><br><br><br><br><br><br><br><br>Many lines of contenr<br><br><br><br><br>More content<br><br><br><br>etc...<br><br><br><br><br><br><br><br><br>Many lines of content<br><br><br><br><br>More content<br><br><br><br>etc...<br><br><br></div>
       <div id="content23">
          <div id="content2">content 2<br><br><br><br><br>Many lines of conetn<br><br></div>
          <div id="content3">Content 3<br><br><br><br><br>Many lines of conetn<br><br></div>
       </div>
     </div>
     <div id="contentbar2">
       <div id="content4">Content 4<br><br><br></div>
       <div id="content5">Content 5<br><br><br></div>
     </div>
     <div id="footer">Footer<br><br><br><br><br><br>Many lines of footer<br><br</div>
  </div>
<p style="clear:both;"><br></p>
</div>

<hr>


   </body>
</html>



----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.
 
Upvote 0 Downvote
Many thanks for that.
I think I get confused using the float and clear parameters - I just can't seem to get these right.

Also, if I wanted the nav column to extend down the length of the content section, would I have to use faux columns?
 
Upvote 0 Downvote
Unfortunately yes,you'd need faux columns for that, as the dynamic nature of the overall container will not let the nav column expand to fill it.



----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

scorney
  • Locked
  • Question Question
background image with overlay which Hover when over a specific Area/Form
Replies
1
Views
1K
3esolar
3
jizzer
  • Locked
  • Question Question
HTML/CSS Image map with multiple tool-tips
Replies
3
Views
2K
spamjim
spamjim
tyutghf
  • Locked
  • Question Question
Achieving this grid layout in css
Replies
1
Views
428
tyutghf
tyutghf
jason.lex
  • Locked
  • Question Question
Bootstrap grid and columns question
Replies
0
Views
307
jason.lex
jason.lex
caykamanj1966
  • Locked
  • Question Question
Sorting a grid list using iframe associated with Google Drive
Replies
0
Views
468
caykamanj1966
caykamanj1966

Part and Inventory Search

Sponsor

Back
Top