CODEWITHSUNDEEP
csshtmlpositioning
Tautvydas
Tautvydas

Reputation: 1288

Div floating, postitioning

I have such html code:

<body style="text-align: center;">
<div style="background-color: #014156; text-align: center; width: 985px; margin:6px auto;">
<div style="background-color: #a6a6a6; width: 975px; background-image:url('shadow.gif'); background-repeat:repeat-x; background-position: center top; margin: 6px; overflow:hidden;">
<div style="float:left; width: 674px; text-align: center; color:#056c02; margin-left: 5px; margin-top: 10px; font-size: 20opx;" title="Product title"><span style="color: #d2ff00">"</span><span style="background-color: #d2ff00">[[Title]]</span><span style="color: #d2ff00">"</span><p style="text-align: left; font-size: 14px; margin-bottom: 5px;" title="Description">[[Description]]</p></div>
<div style="float:left; width: 301px; text-align: center; " title="General information (Image, stock, price)">[[Picture1]]<BR><SPAN style="FONT-SIZE: 9px; background-color: #FFFFFF;">Image is for illustrative purposes only. Please refer to product description.</SPAN></div>
</div>

Which results:

enter image description here

In Gray backgrounded div I need that two divs would align inline, and result would be like this: enter image description here

What should I change, where is the problem?

P.s. my styles is described in tags because I dont have ability to use css for this because of some host reasons. So please don't start telling me about it :)

Upvotes: 0

Views: 67

Answers (3)

marteljn
marteljn

Reputation: 6516

You have a p tag which is a block lined up next to and inline span. Add either inline or inline-block to the p tag, depending on your requirements. Another possibility is you could change the p to a span.

Upvotes: 0

James
James

Reputation: 2033

You need to lower the width of either the left div or the right div.

Lowering the first div to 650px for example fixes the problem.

Your logic was right: 674px + 301px does equal 975px but you didn't account for margins and padding and borders in those values. Make the "real" width less than or equal to 975px

Upvotes: 1

martriay
martriay

Reputation: 5742

Instead of float: left, try with display: inline-block, that should work.

Upvotes: 0

Related Questions