1

I have a button over my div.

<button id="showmenu" type="button">Show menu</button>
<div class="sidebarmenu">
    Some code
</div>

The div is displayed right below the button. I want the button to be displayed with a line break. I know it is a bad practice to use <br/>. How do I give space without it?

MLeFevre
  • 4,451
  • 3
  • 29
  • 43
Bittu
  • 347
  • 2
  • 6
  • 12
  • 1
    can you provide a screenshot of how you want and also a jsFiddle link for your issue? – Nitesh Sep 02 '13 at 12:35
  • @Bittu use top margin in style – rajesh kakawat Sep 02 '13 at 12:36
  • http://jsfiddle.net/8caCw/ THis is my fiddle. This is how I want to do without using
    – Bittu Sep 02 '13 at 12:38
  • It's possible to do it without
    with margin usage in css. However don't think that simply using
    is bad practice, it's not, in your example it would be the easiest & fastest way to accomplish what you want, and isn't a _bad_ way to do it. See mattytommo's response.     – MLeFevre Sep 02 '13 at 12:42
  • Are you looking for this? http://jsfiddle.net/8caCw/2/ -@Bittu – Nitesh Sep 02 '13 at 12:45
  • Here is another answer for the same. http://jsfiddle.net/8caCw/3/ - @Bittu – Nitesh Sep 02 '13 at 12:47

7 Answers7

3

With css:

.sidebarmenu{
  margin-top: 20px;
}

Live example: http://jsfiddle.net/BhsYx/

Ivan Chernykh
  • 40,230
  • 12
  • 130
  • 145
  • 2
    No. - @SpaceBison The OP has no where declared float. He is showing us a snippet of his code, but this may be exhaustively used on his project. So changing back to float and clearing it would not necessarily be feasible. If he had already used a float, then float with clear or should I say `.clearfix` would have been the best solution. – Nitesh Sep 02 '13 at 12:49
  • @Nathan - Yes, I see what you're saying but I made that statement because the OP has "no where declared" *any* CSS - I thought it would be prevalent to make note of other options that are often employed with positioning and CSS. I ought to have made this clearer in my first comment. – SpaceBison Sep 02 '13 at 14:49
2

You can use

#showmenu{
   margin-bottom:10px;
}

Demo

Amit
  • 15,021
  • 8
  • 44
  • 66
2

The right way to make a line break is to use <br>.

To put some space between block elements though, you can use CSS properties like margin (external) or padding (internal). But margin is not line break. <br> means line break, and renders as an empty space. Margins are another way to render empty space, but this is not equivalent because it does not impact the same things.

Tristan Jahier
  • 1,116
  • 1
  • 12
  • 27
1

You could make it a block level element...

button{
    display: block;
}

see fiddle: http://jsfiddle.net/dwBG4/

Billy Moon
  • 54,763
  • 23
  • 128
  • 231
1

You can try this : 

       <button id="showmenu" type="button">Show menu</button>
       <div class="sidebarmenu" style="margin-top:20px" >
            Some code
        </div>
arifalam91
  • 107
  • 1
  • 2
  • 9
0

You can display block your button

button{display:block}
defau1t
  • 10,457
  • 2
  • 33
  • 46
0

Not exactly bad practice in your given scenario really. It's only bad practice when you see something like:

<div>
</div>
<br />
<br />
<input />
<br />
<br />

But you're wanting to use it to control text, so use it! This reminds me of when you see people hating on tables, yet use display: table and display: table-cell on a divs!

mattytommo
  • 54,375
  • 15
  • 123
  • 144
  • @Cherniv That's different, the OP has stated he can change the markup – mattytommo Sep 02 '13 at 12:44
  • To be fair the table display mode on divs allows you to have some different semantics that are inherently there from actual table tags. So you could make an actual table layout like that. But yeah, I agree, I’m not a fan of that practice at all… – poke Sep 02 '13 at 12:48