Jump to content

CSS float help


shergold

Recommended Posts

<!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.

Link to comment
https://forums.phpfreaks.com/topic/207365-css-float-help/
Share on other sites

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

Link to comment
https://forums.phpfreaks.com/topic/207365-css-float-help/#findComment-1084306
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.