...

View Full Version : Problems with boxes



OGGordon
11-16-2011, 02:04 PM
Hey guys,

im using shortcodes to display boxes however they wont appear next to each other but rather under. How can I change that? Code is:


<p style="width: 100%; text-align: left;"><strong>Prepaid Handy Tarife</strong></p>

<div style="width: 100%; text-align: left;">Im Durchschnitt zahlen die Deutschen 25 Euro im Monat für einen veralteten Handyvertrag, ohne ihn wirklich zu nutzen. Prepaid Tarife sind eine kostengünstige Alternative und man behält durch die Nutzung auf Guthaben Basis den Überblick. Es lohnt sich objektiv zu vergleichen und seinen alten Vertrag zu kündigen. Günstige Handykarten gibt es bereits ab fünf Euro und Gespräche in alle Netze ab 7,5 Cent. Umsteigen lohnt sich - Prepaid Tarife bieten viele Vorteile ...</div>
<div style="width: 100%; text-align: left;"><span style="color: #f1f1f1;">_</span></div>
<div style="width: 100%; text-align: left;">
<table width="98%" border="0" cellspacing="1" cellpadding="1" align="center">
<tbody>
<tr>
<td><img title="Keine Vertragsbindung" src="/images/icon_check_yes.png" alt="Keine Vertragsbindung" width="12" height="12" />*Keine Grundgebühr</td>
<td><img title="Ein Preis" src="/images/icon_check_yes.png" alt="Ein Preis" width="12" height="12" />*Ein Preis in alle Netze</td>
<td></td>
</tr>
<tr>
<td><img title="Keine Vertragsbindung" src="/images/icon_check_yes.png" alt="Keine Vertragsbindung" width="12" height="12" />*Keine Vertragsbindung</td>
<td><img title="Handy Internet Flatrate" src="/images/icon_check_yes.png" alt="Handy Internet Flatrate" width="12" height="12" />*Handy Internet Flatrate</td>
<td></td>
</tr>
<tr>
<td><img title="Kein Mindestumsatz" src="/images/icon_check_yes.png" alt="Kein Mindestumsatz" width="12" height="12" />*Kein Mindestumsatz</td>
<td><img title="Kostenkontrolle" src="/images/icon_check_yes.png" alt="Kostenkontrolle" width="12" height="12" />*Volle Kostenkontrolle</td>
<td></td>
</tr>
</tbody>
</table>
</div>
<div style="width: 100%; text-align: left;"></div>
<div style="width: 100%; text-align: left;"> Aktion News Bookmark Us Content goes here Content goes here Content goes here </div>
<div style="width: 100%; text-align: left;"></div>
<div style="width: 100%; text-align: center;">[table id=1 /]</div>

You can see the sample at removed by request

teedoff
11-16-2011, 03:14 PM
Hi OGGordon,

I think you have broken your box model, which says you cant place any element inside a containing element thats too wide to fit. Width of the element, alon with margins, paddings, and borders all count.

Your container is set at 960px wide, but your table is also at 960px wide, so therefore breaks your layout. You can read about the box model here (http://www.w3.org/TR/CSS2/box.html).

OGGordon
11-16-2011, 03:47 PM
hi teedoff,

thanks for your reply. I deleted the table and tried what you told me but it still doesnt work so I dont think that it is because of the table. Maybe the boxes have <p> attributes in the css?

teedoff
11-16-2011, 03:50 PM
Maybe I misunderstood what you wanted.

You want the two rounded corner "boxes" to be side by side?

OGGordon
11-16-2011, 03:54 PM
Maybe I misunderstood what you wanted.

You want the two rounded corner "boxes" to be side by side?

yeah thats right ;)

and the big table under the two boxes.

teedoff
11-16-2011, 04:03 PM
What happens if you remove that margin-right: 4% from one_half?

OGGordon
11-16-2011, 04:17 PM
TEED!!! I LOVE YOU! Its working! thank you so much :). I didn't remove it, just changed it to 1% and change half width to 48%. Works! Thanks again :D

dyn
11-18-2011, 12:48 PM
you're stealing my complete website and post a topic about it on an open forum? :thumbsup:



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum