2

I have a little problem with making a website design. I tried for like 2 hours and just can't seem why a padding-bottom won't work. Well, here is the HTML of the element:

<div class="Element">
    <div class="HeadingL">Choose size</div>
    <div class="click1">
        <ul>
            <li><a href="#">10cm $175</a></li>
            <li><a href="#">15cm $295</a></li>
            <li><a href="#">20cm $395</a></li>
        </ul>
    </div>
</div>

And here the relevant CSS:

 .click1 ul {
     padding: 0;
     list-style-position: inside;
     list-style-type: none;
 }
 .click1 li {
     display:inline;
     padding: 5px;
     margin-right:5px;
     border-color:green;
     border-style: solid;
     border-width: 1px;
     border-radius: 5px;
     white-space: nowrap;
 }
 .click1 li:hover {
     border-color:red;
 }
 .Element {
     border-bottom: 1px solid #000;
     width:100%
 }
 .HeadingL {
     padding-top:10px;
     text-transform: uppercase;
     font-family:'Open Sans', sans-serif;
 }

So the problem is, that if I resize the window that there is not enough space for all three buttons, one moves a line down. That is how it should be, but the borders of the elements are overlapping and I tried padding-botton and margin-bottom but that doesn't seem to help?

https://i.stack.imgur.com/1ZVqd.png

Thanks

Jens A. Koch
  • 39,862
  • 13
  • 113
  • 141
razer
  • 61
  • 1
  • 7

1 Answers1

1

display them inline-block and it will work properly, you can add some margin-bottom if you want margin-bottom: 40px;

LIVE DEMO

.click1 li {

 display:inline-block;  
 padding: 5px;
 margin-right:5px;
 border-color:green;
 border-style: solid;
 border-width: 1px;
 border-radius: 5px;
 white-space: nowrap;
 margin-bottom: 40px;
}
ZEE
  • 5,669
  • 4
  • 35
  • 53
  • 1
    Well, how easy was that 8). I tried to add more divs and so on haha. Thank you Ze Rubeus! – razer Mar 22 '15 at 16:27
  • Hey @ZeRubeus, could you help me out to get this to work in IE? It looks fine in Webkit Browsers, Firefox, but not the most-loved browser in the world. It looks like this: http://i.imgur.com/nBBIIgf.png It doesn't show them inline. – razer Mar 24 '15 at 13:31
  • this is an other question post it in a separate question and you will be answered by the community :) – ZEE Mar 24 '15 at 15:12
  • this may helps http://stackoverflow.com/questions/5838454/inline-block-doesnt-work-in-internet-explorer-7-6 – ZEE Mar 24 '15 at 15:16