CODEWITHSUNDEEP
htmlcssmarginpadding
Marc Ster
Marc Ster

Reputation: 2316

Strange Padding/Margin of text in a div

I can´t figure out, why the text has got a margin and does not fit in the box:

have a look at this fiddle: http://jsfiddle.net/SSLZR/

This is an excerpt of my HTML (pls have a look at the fiddle):

<!-- my Box -->
<div style="margin-bottom:50px">
<div id="kasten" style="width: 600px; height: 200px;background-color:#f0f0f0;">
<div style="margin-bottom:5px;margin-left:7px;padding-top:7px;"><b>Vitamine:</b></div>
<div style="width:300px; height:300px;float:left;margin-left:7px">
<a href="">
 » <u>Biotin </u>
 </a></br>
 <a href="">
 » <u>Vitamin A</u>
 </a></br>


 </div>
 </div>
 </div>

Thank you!

Upvotes: 0

Views: 195

Answers (3)

Yagiz Ozturk
Yagiz Ozturk

Reputation: 5428

tried removing some of your styles. Use less code.

<body>

<!-- Vitamine -->
<div style="margin-bottom:50px">
<div id="kasten" style="width: 600px; height: 200px;background-color:#f0f0f0;">
<div style="margin-bottom:5px;margin-left:7px;padding-top:7px;"><b>Vitamine:</b></div>
<div style="width:300px; height:300px;float:left;margin-left:7px">
<a href="">
» <u>Biotin </u>
</a><br>
<a href="">
» <u>Vitamin A</u>
</a><br>
<a href="">
» <u>Vitamin B12</u>
</a><br>
<a href="">
» <u>Vitamin B6 </u>
</a><br>
<a href="">
» <u>Vitamin D </u>
</a><br>
<a href="">
» <u>Vitamin K</u>
</a><br>


</div>
<div style="width:286px; height:300px;float:left;">
<a href="">
» <u>Niacin </u>
</a><br>
<a href="">
» <u>Vitamin B1 </u>
</a><br>
<a href="">
» <u>Vitamin B2 </u>
</a><br>
<a href="">
» <u>Vitamin C </u>
</a><br>
<a href="">
» <u>Vitamin E </u>
</a><br>

</div>

</div>
</div>






<!-- Mineralstoffe -->

<div id="kasten" style=" background-color:#f0f0f0;float: left;">

<div style="margin-bottom:5px;margin-left:7px;padding-top:7px;top:0"><b>Mineralstoffe:</b></div>
<div style="width:300px; float:left;margin-left:7px;">
<a href="">
» <u>Calcium </u>
</a><br>
<a href="">
» <u>Eisen </u>
</a><br>
<a href="">
» <u>Kalium</u>
</a><br>
<a href="">
» <u>Magnesium </u>
</a><br>
<a href="">
» <u>Natrium </u>
</a><br>
<a href="">
» <u>Schwefel </u>
</a><br>
<a href="">
» <u>Zink </u>
</a><br>

</div>
<div style="width: 191px; float:left;">
<a href="">
» <u>Chlor </u>
</a><br>
<a href="">
» <u>Fluor </u>
</a><br>
<a href="">
» <u>Kupfer </u>
</a><br>
<a href="">
» <u>Mangan </u>
</a><br>
<a href="">
» <u>Phosphor </u>
</a><br>
<a href="">
» <u>Selen </u>
</a><br>
</div>


</div>










</body>

Upvotes: 0

Luke
Luke

Reputation: 5074

http://jsfiddle.net/SSLZR/2/

Add display:inline-block; to the style of your kasten div:

<div id="kasten" style="width: 600px; display:inline-block;height: 200px;background-color:#f0f0f0;">

Upvotes: 2

matsitka
matsitka

Reputation: 36

a simple float left will do:

<div id="kasten" style="width: 600px; height: 200px;background-color:#f0f0f0;float:left;">

http://jsfiddle.net/SSLZR/1/

Upvotes: 1

Related Questions