CODEWITHSUNDEEP
javascripthtmlcss
MadMan
MadMan

Reputation: 59

Using divs inside anther div to create the structure of the website

Hi guys so i am playing around with html and Divs at the moment and trying to create a mimic of a website which i found. Trying to get as much practice in

This is the website which i am trying to mimic at the moment. Link

So from what i can tell it should look something like this: 

 -----------------------------------------------
|    |                                 |       |                    
|-----------------------------------------------                        
|    |Logo                      Nav Bar|       |
|-----------------------------------------------                        
|    |                                 |       |                   
|    |                                 |       |                    
|    |               Body              |       |                
|    |                                 |       |                    
|    |                                 |       |                    
|-----------------------------------------------                        
|    |Logo                        Info |       |
|-----------------------------------------------                        
|    |                                 |       |                    
 -----------------------------------------------

Sorry for the bad drawing :) But if possible could someone please go about telling me how to create something like this just using the basic div layout.

Usally when i have created some simple websites before. It has always been simple divs such as 

<div class="logo">
.......
</div>

and then open anther div outside of that. Thanks again for all the help

P.s This is the code which i tried to work with but not sure if i have got it right: 

<div class="Container">
    <div class="Header">
        <div class="Left">
            <div class="Right">
                <div class="Body">
                    <div class="Footer">
                    </div>
                </div>  
            </div>          
        </div>  
    </div>  
</div>

The container being the whole site. Then the header being the top nav bar. with the left side and right allowing me to float the text and image to the right hand side and left. Body for the text inside of it. The footer for the bottom nav bar.

Upvotes: 0

Views: 108

Answers (4)

Alex Smith
Alex Smith

Reputation: 13

You might be better off using the new semantics that are in HTML5.

instead of nesting <div>'s you could try something like:

<header>
   <img src="logo.svg" alt="company" href="index.html">
   <nav><ul>
     <li><a href="#">Menu Links<a/></li>
   </ul></nav>
</header>

<section id="use id's to position all your elements in the css file">
   <article class="and classes to add repeat articles">
      // contents //
   </article>
</section>

Upvotes: 0

VG1
VG1

Reputation: 195

Try using the Boootstrap UI GridOptions (http://getbootstrap.com/css/#grid-options), which comes with responsive css classes to help you with this kind of grid layout. So your divs would look something like this:

<div class="row">
    <div class="col-lg-2">
    </div>
    <div class="col-lg-8">
        <div class="pull-left">
            Logo
        </div>
        <div class="pull-right">
            Nav Bar
        </div>
    </div>
    <div class="col-lg-2">
    </div>
</div>
<div class="row">
    <div class="col-lg-2">
    </div>
    <div class="col-lg-8">
        <div class="center-block">
            Body
        </div>
    </div>
    <div class="col-lg-2">
    </div>
</div>...

Upvotes: 0

Maxick
Maxick

Reputation: 68

But you can go on the complex, but more interesting way :) And, perhaps, the first problem that you will face - pressing the footer to the bottom. A good option that I found and use - flex.

HTML

<body>
  <div class="wrap">
    <header>...</header>
    content...
  </div>
  <footer>...</footer>
</body>

CSS

body {
    display: flex;
    min-height: 100vh;
    flex-direction: column;
    padding: 0px;
    margin: 0px;
}

.wrap{
    flex: 1 0 auto;
}

Upvotes: 2

elTomato
elTomato

Reputation: 333

The structure could be something like

<div class="header">
   <div class="logo">...</div>
   <div class="navbar">...</div>
</div>
<div class="content">
...
</div>
<div class="footer">
   <div class="logo">...</div>
   <div class="info">...</div>
</div>

Obviously you'll need some css or to use some framework like bootstrap.

Upvotes: 1

Related Questions