HTML for boxes side by side

[opportunist86]

I want to put two adsense boxes before my content in such a way that both boxes appear together. Like on this page.

[ralph.m]

They haven't done that very well. Firstly, they use outdated code to make that happen, and I don't see the point, as it just repeats the ads!

Anyhow, if you really want to do this, create two divs, give them a width a bit less than half the width of the content area, set them to float: left; or display: inline-block; and then paste the Google code inside each of them.

[opportunist86]

They haven't done that very well. Firstly, they use outdated code to make that happen, and I don't see the point, as it just repeats the ads!

Anyhow, if you really want to do this, create two divs, give them a width a bit less than half the width of the content area, set them to float: left; or display: inline-block; and then paste the Google code inside each of them.

My site is on wordpress and I'm using following code to wrap my content around adsense box.
<div style="float: left; margin: 3px 3px 3px 3px;"> code</div>
I put two divs, one with left and other with right but not getting what I want. Can you guide a little bit more?

[ralph.m]

It's better to put the styles in your external style sheet, but I'll put them inline here for demo porpoises. You need to give the boxes a width or floating won't do anything. Ideally, we should see your page (or some demo code) to know what circumstances you're working within (fixed width wrapper? etc.), but here's a possible way to go:

<div style="float: left; margin: 2%; width: 40%;"> code</div>

If your content area has a fixed width, you could change the width and margins to pixels, but mixing pixels and % is a bit hit and miss.

[opportunist86]

My site is ceramic tiles.

[ralph.m]

OK, try changing the styles on that container div to:

<div style="float: left; margin: 3px 10px 3px 3px; width: 330px;"> </div>

and then duplicate it so that there are two.

[opportunist86]

OK, try changing the styles on that container div to:

<div style="float: left; margin: 3px 10px 3px 3px; width: 330px;"> </div>

and then duplicate it so that there are two.

You are great mate!
Thank you very much. its done finally.
How do you know so much about CSS and html. Have you learned it specially or just on interent?

[ralph.m]

How do you know so much about CSS and html. Have you learned it specially or just on interent?

Just from books, hanging around here, and practice. But I don't know much really ...

Glad to help, anyhow.