Floats and Divs

#1
hoku_2000 _99

Posted 01 October 2011 - 06:50 PM

Learning Programmer

Members
67 posts

I have an image thats floating to the left and two paragraphs that are floating to the right. My outcome is what I am going for, but I think I may have used too many divs. Can someone please lookover my code and give a few tips to make it better, if I can. :)


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!--
Author: Reality Software
Website: http://www.realitysoftware.ca
Note: This is a free template released under the Creative Commons Attribution 3.0 license, 
which means you can use it in any way you want provided you keep the link to the author intact.
-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<link href="style.css" rel="stylesheet" type="text/css" /></head>
<body>
    <!-- header -->
    <div id="header">
        <div id="logo"><a href="#">Header</a></div>
        <div id="menu">
            <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">Link 1</a></li>
            <li><a href="#">Link 2</a></li>
            <li><a href="#">Link 3</a></li>
            <li><a href="#">contact</a></li>
        <li><a href="#">Guestbook</a></li>
            </ul>
      </div>
  </div>
    <!--end header -->
    <!-- main -->
    <div id="main">
    <div id="content">

   
 <div id="text">
                <h1><strong>Welcome</strong></h1>
</div>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>

<div style="float: left;">
<img src="images/test.jpg" width="304px;" height="285px;"/></div>


<div style="float: right; width: 220px; margin-right: 5px;">
<h2>Header</h2>
  <p>
     This is our right text column.
    This is our right text column.
    This is our right text column.
    This is our right text column.
    This is our right text column.
     This is our right text column.
    This is our right text column.
    This is our right text column.
    This is our right text column.
    This is our right text column.
  </p>
</div>



<div style="float: right; width: 20px; margin-right: 6px;">
<img src="images/div103.gif" height="200px;"/></div>

<div style="float: right; width: 220px; margin-right:5px;">
<h2>Header</h2>
  <p>
    This is our left text column.
    This is our right text column.
    This is our right text column.
    This is our right text column.
    This is our right text column.
     This is our right text column.
    This is our right text column.
    This is our right text column.
    This is our right text column.
    This is our right text column.
  </p>
</div>

<div style="clear: both;"> </div>    
    

<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
          </div>
           
     <!-- footer -->
    <div id="footer">
    <div id="left_footer">© Copyright 2011<strong> Author </strong></div>
    <div id="right_footer">

<!-- Please do not change or delete this link. Read the license! Thanks. :-) -->
Design by <a href="http://www.realitysoftware.ca" title="Website Design">Reality Software</a>

    </div>
    </div>
    <!-- end footer -->
</div>
    <!-- end main -->



</body>
</html>

#2
Aemara

Posted 02 October 2011 - 07:49 AM

Newbie

Members
2 posts

Hi Hoku,

1. You are writing the end comments after the divs but it's better to write it beside the div like this

<div id="header">


</div>  <!-- End of header -->

2. You have to organize your code a little bit instead of this

<div id="header">

        <div id="logo"><a href="#">Header</a></div>

        <div id="menu">

            <ul>

            <li><a href="#">Home</a></li>

            <li><a href="#">Link 1</a></li>

            <li><a href="#">Link 2</a></li>

            <li><a href="#">Link 3</a></li>

            <li><a href="#">contact</a></li>

        <li><a href="#">Guestbook</a></li>

            </ul>

      </div>

  </div>

You can write this

<div id="header">

     <div id="logo">

          <a href="#">Header</a>

     </div>


      <div id="menu">

            <ul>

                <li><a href="#">Home</a></li>

                <li><a href="#">Link 1</a></li>

                <li><a href="#">Link 2</a></li>

                <li><a href="#">Link 3</a></li>

                <li><a href="#">contact</a></li>

                <li><a href="#">Guestbook</a></li>

           </ul>

      </div>

</div>

And in the navigation you can remove the div and put unordered list instead like this

<ul id="menu">

        <li><a href="#">Home</a></li>

        <li><a href="#">Link 1</a></li>

        <li><a href="#">Link 2</a></li>

        <li><a href="#">Link 3</a></li>

        <li><a href="#">contact</a></li>

        <li><a href="#">Guestbook</a></li>

</ul>

3. you are writing to many breaklines and that is not good and not semantic :cool: , You can give space with margins and padding in css instead of writing <br/>

4. The inline styling you do in the div is not good

<div style="float: left;">

<div style="float: right; width: 220px; margin-right: 5px;">

you have to make the styling in a separate file

5. I think in the footer you are choosing wrong names, you can write

<div id="left_half">

    <div id="right_half">

Instead of

<div id="left_footer">

    <div id="right_footer">

I think you can divide the footer like this :)

I hope i helped you improve in html skills and I recommend you to go to this site and see the tutorials

webdesign.tutsplus.com ( This site is awsome :lol: )