How to align boxes in a row in HTML and CSS on my webpage?

Question

My webpage on my new website at http://www.innovacomputingsoftware.com/products/inol.html is for one of my products. I can't get the second, "About" box to be to the right of the first one. Instead, it is to the right and below it by one line. How do I fix this in HTML and CSS? The code for the webpage is-

    <html>
<head>
<title>Innova Computing Software</title>
<meta name="description" content="Innova Computing Software is a small, American company aimed at making quality software that is cheap or free." />
<style>
.boxed {
    background-color : #C3C3C3 ;
    border: 1px solid #008000;
    width: 414px;
}
</style>
</head>
<body bgcolor="gray">
<a href="http://innovacomputingsoftware.com/index.htm"><img src="logo.png"></img></a>
<a href="/about/index.html"><img src="about.png"></img></a>
<a href="/products/index.html"><img src="products.png"></img></a>
<a href="help.htm"><img src="help.png"></img></a>
<a href="contact.htm"><img src="contact.png"></img></a>
<br>
<br><img src="dividerbar.png"></img>
<br>
<br>
<div class="boxed">
<br><center><font size="7" face="arial" color="red">About</font></center>
</div>
<center>
<div class="boxed"><center><font size="7" face="arial" color="red">About</font></center>
</div>
</center>
<br>
<br>
<br>
<br>
<br><font face="arial" size="1">Coded and served by Drew Easton.  You do not have permission to reproduce or alter any of the 
<br>content provided to you within this website under any circumstances, unless otherwise stated by
<br> the owners of this server and the authors of the content which you view.</font>
</body>
</html>

You can float .boxed element to the left by adding .boxed { float: left; } and it will appear to the next of it. — shadeed9
– shadeed9, Commented Dec 20, 2015 at 20:46
After floating the .boxed elements to left, be sure to also add an HTML element after them and add the clear: both; style on it, in order to prevent subsequent elements from being floated also. — Ikechukwu Kalu
– Ikechukwu Kalu, Commented Dec 20, 2015 at 21:02

shadeed9 · Accepted Answer · 2015-12-20 20:50:44Z

1

.boxed element is a div which is by default displayed in a new line. You can float it and you will get the other item next to it.

.boxed {
  float: left;
}

answered Dec 20, 2015 at 20:50

shadeed9

1,8365 gold badges23 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to align boxes in a row in HTML and CSS on my webpage?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related