HTML Forum

**mushget** · 10-08-2010, 03:48 AM

First off, yes I read the FAQs, scoured the internet for solutions, etc. I also found several solutions to this problem, however I have not been able to get any of them to work. I'm a CS student at a university, but have very little experience with web development, so I decided to build a website for myself from scratch to get some hands on experience.
Here is the problem: I need to put 2 div tags side by side. Float:left, clear:both, and any number of other solutions I have found though google have failed me. I feel like I have to be missing something incredibly elementary, but these tags will not sit next to each other.

Code:

<html>
	<body>
		<div style = "width: 100%;">
			<div stlye = "width: 10%; float:left;">
				Name:<br>
				Comment:
			</div>
		
			<div style = "width: 70%; float:left;">
				<form action = "comment.php" method = "post">
				<input type = "text" name = "name" size = "57">
				<input type = "submit" value = "submit"><br>
				<textarea cols = "50" rows = "6" name = "comment"></textarea>
			</form>
			</div>
			<div style = "clear:both;"></div>
		</div>
	</body>
</html>

As you can see, I've tried making the 2 div tags smaller than 100% width in an effort to make them fit on the same line, added a "clear:both" div tag as indicated by several forum posts on other websites, and this is still the end result.

I apologize in advance if I come off sounding ungrateful or snobbish; I'm just feeling like an idiot right now because I can't figure out how to get something so simple to work properly.

**aslef** · 10-08-2010, 04:19 AM

as a start, just add

div
{
float:left;
}

and see what you get. if that doesnt work, get rid of the containing div and then see what it looks like

**Web Design** · 10-08-2010, 07:24 AM

You have a spelling mistake in your code to start with, try it with it fixed.

<html>
<body>
<div style = "width: 100%;">
<div stlye = "width: 10%; float:left;">

**LadynRed** · 10-08-2010, 08:55 AM

Fixing the typo will fix your problem as noted above.

**mushget** · 10-11-2010, 08:57 PM

Thanks guys.

**captkrackerjack** · 10-13-2010, 01:28 PM

For a quick recommendation, place all the style into your header instead of inline on the elements. This will make your code a bit cleaner as well as making it easier to avoid such mistakes. Since there will be less points of failure as well as allowing easier reuse of code. The best solution overall is to use external style sheets but for testing and learning using embeded stylesheets is okay.

So your code would look like this using the method I suggest.

Code:

<html>
 <head>
  <title>Document</title>
  <style type="text/css">
   .float {
        float: left;
   }
   .clear {
       clear: both;
   }
   #container {
       width: 100%;
   }
   .left_width {
       width: 10%;
   }
   .right_width {
       width: 70%;
   }
  </style>
 </head>
 <body>
  <div id="container">
   <div class="left_width float">
        Name:<br>
        Comment:
   </div>
 
   <div class="right-width float">
    <form action = "comment.php" method = "post">
     <input type = "text" name = "name" size = "57">
     <input type = "submit" value = "submit"><br>
     <textarea cols = "50" rows = "6" name = "comment"></textarea>
    </form>
   </div>
   <div class="clear"></div>
  </div>
 </body>
</html>

Check out w3schools.com this is a great resource for learning web languages. Finally look into web standards as well I know you are learning but learn the right way from the beginning, I see use of <br> tags which, in my opinion shouldn't be used as well.

P.S. The code I provided hasn't been tested but its to get the general idea of how to better use CSS. There are also use of classes and id's so again read up on it but learn it this way since its far better off for you.

HTML Forum

Find a Professional HTML Freelancer!

FREE Outsourcing eBook!