CSS float help

shergold · July 10, 2010

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
  <meta name="generator" content=
  "HTML Tidy for Linux/x86 (vers 11 February 2007), see www.w3.org" />
  <meta http-equiv="Content-type" content="text/html; charset=utf-8" />

<style type="text/css">

#wrapper {
	width:680px;
	margin: 0 auto;
	padding: 0 20px;
	border-left: 1px solid #666666;
	border-right: 1px solid #666666;
	font-family: Georgia, Times, serif;
}

h1 {
	 color:red;
	 font-size: 2em;
	 font-family: Aria, sans-serif;
	 margin: 0;
	 border-bottom: 2px dashed black;
}

h2 {
}

p {
	color: #003366;
	font-size: .9em;
	line-height: 150%;
	margin-top: 0; 
	width: 400px;
}

.side {
	float: right;
	width: 200px;
	margin: 10px;
	padding: 5px;
	border: 1px solid;
	background-color: #CCCCCC;

}

#footer {
	clear: left;
	margin: 20px 10px;
}

</style>


  <title>Webpage Title</title>
</head>

<body>
<div id="wrapper">
  <div id="banner"></div>

  <h1>Website Title</h1>

  <div class="news">
    <h2>News Item 1</h2>

    <p>Lorem ipsum dolor sit amet,consectetur adipiscing elit.Praesent vitae dolor risus,
    ultricies condimentum felis.
    In eget nisl risus. Fusce auctor euismod sapien ac facilisis. Vestibulum a dolor sed
    nisl gravida sagittis vel vitae tortor.
    In varius auctor sem, id faucibus tellus posuere a.Suspendisse quis arcu turpis, in
    pellentesque.</p>
  </div>

  <div class="news">
    <h2>News Item 2</h2>

    <p>Lorem ipsum dolor sit amet,consectetur adipiscing elit.Praesent vitae dolor risus,
    ultricies condimentum felis.
    In eget nisl risus. Fusce auctor euismod sapien ac facilisis. Vestibulum a dolor sed
    nisl gravida sagittis vel vitae tortor.
    In varius auctor sem, id faucibus tellus posuere a.Suspendisse quis arcu turpis, in
    pellentesque.</p>
  </div>

  <div class="side">
    <h3>Events</h3>

    <ul>
      <li>14/05/10 - Event name</li>

      <li>15/05/10 - Event name</li>

      <li>16/06/10 - Event name</li>
    </ul>
  </div>

  <div class="side">
    <h4>Address</h4>

    <address>
      15 lorem road,<br />
      Impsum,<br />
      England
    </address>
  </div>

  <div class="side">
    <h4>Newsletter signup</h4>Recieve news and events via email

    <form action="newsletter.php" method="get">
      <fieldset>
        Email: <input type="text" id="email" /><br />
        <input type="submit" value="submit" />
      </fieldset>
    </form>
  </div>

  <div id="footer">
    <i>Copyright 2010</i>
  </div>
</div>
</body>
</html>

Hey everyone, Im having trouble getting the side boxes to float to the right of the text, any help is appriciated.

Thanks,

Shergold.

joePHP · July 11, 2010

Hi,

Put the news div's in a holder and set it to float left.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
  <meta name="generator" content=
  "HTML Tidy for Linux/x86 (vers 11 February 2007), see www.w3.org" />
  <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
   
   <style type="text/css">
   
   #wrapper {
      width:680px;
      margin: 0 auto;
      padding: 0 20px;
      border-left: 1px solid #666666;
      border-right: 1px solid #666666;
      font-family: Georgia, Times, serif;
		overflow: auto;
   }
   
   h1 {
       color:red;
       font-size: 2em;
       font-family: Aria, sans-serif;
       margin: 0;
       border-bottom: 2px dashed black;
   }
   
   h2 {
   }
   
   p {
      color: #003366;
      font-size: .9em;
      line-height: 150%;
      margin-top: 0;
      width: 400px;
   }
   
   .side {
      float: right;
      width: 200px;
      margin: 10px;
      padding: 5px;
      border: 1px solid;
      background-color: #CCCCCC;
      
   }
   
   #footer {
      clear: both;
      margin: 20px 10px;
   }
   
 #news_holder
 {
	float: left;
 }
   </style>


  <title>Webpage Title</title>
</head>

<body>
<div id="wrapper">
  <div id="banner"></div>

  <h1>Website Title</h1>
<div id="news_holder">
  <div class="news">
    <h2>News Item 1</h2>
   
    <p>Lorem ipsum dolor sit amet,consectetur adipiscing elit.Praesent vitae dolor risus,
    ultricies condimentum felis.
    In eget nisl risus. Fusce auctor euismod sapien ac facilisis. Vestibulum a dolor sed
    nisl gravida sagittis vel vitae tortor.
    In varius auctor sem, id faucibus tellus posuere a.Suspendisse quis arcu turpis, in
    pellentesque.</p>
  </div>

  <div class="news">
    <h2>News Item 2</h2>

    <p>Lorem ipsum dolor sit amet,consectetur adipiscing elit.Praesent vitae dolor risus,
    ultricies condimentum felis.
    In eget nisl risus. Fusce auctor euismod sapien ac facilisis. Vestibulum a dolor sed
    nisl gravida sagittis vel vitae tortor.
    In varius auctor sem, id faucibus tellus posuere a.Suspendisse quis arcu turpis, in
    pellentesque.</p>
  </div>
</div>
  <div class="side">
    <h3>Events</h3>

    <ul>
      <li>14/05/10 - Event name</li>

      <li>15/05/10 - Event name</li>

      <li>16/06/10 - Event name</li>
    </ul>
  </div>

  <div class="side">
    <h4>Address</h4>

    <address>
      15 lorem road,<br />
      Impsum,<br />
      England
    </address>
  </div>

  <div class="side">
    <h4>Newsletter signup</h4>Recieve news and events via email

    <form action="newsletter.php" method="get">
      <fieldset>
        Email: <input type="text" id="email" /><br />
        <input type="submit" value="submit" />
      </fieldset>
    </form>
  </div>

  <div id="footer">
    <i>Copyright 2010</i>
  </div>
</div>
</body>
</html>

I hope this helps,

Joe

Sign In

CSS float help

Recommended Posts

shergold

Link to comment

Share on other sites

joePHP

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information