CODEWITHSUNDEEP
htmlcss
Hector Barbossa
Hector Barbossa

Reputation: 5528

Position divs side by side without using css float

I need to place a couple squares side by side using this HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
<style type="text/css">
.block{
height:20px;
width:20px;
background-color:blue;
float:left;
margin-right:3px;
}
</style>
 </head>

 <body>
 <div class="block"></div>
 <div class="block"></div>
 <div class="block"></div>
 <div class="block"></div>
 </body>
</html>

but I am using one application named Corda to generate PDF out of the HTML,which does not support the css float property. Are there any other ways to achieve the same effect using other css properties? (Corda has only basic css tag support)

Upvotes: 0

Views: 3077

Answers (3)

Madara&#39;s Ghost
Madara&#39;s Ghost

Reputation: 174957

display: inline-block;
/* Or */
display: table-cell;

are your best options. unfortunately, lower IEs won't like both.

Upvotes: 0

medkg15
medkg15

Reputation: 1595

You can use display:inline to get them next to one another. display:inline-block will cause them to behave more like a standard <div> but its not supposed by ie7 or lower.

Upvotes: 3

Grigor
Grigor

Reputation: 4049

Use span instead of div attribute, which doesnt put line breaks

Upvotes: 0

Related Questions