Give a line break without using

Question

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?

can you provide a screenshot of how you want and also a jsFiddle link for your issue? — Nitesh, Sep 02 '13 at 12:35
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. — SubjectCurio, 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

score 3 · Answer 1 · answered Sep 02 '13 at 12:35

3

With css:

.sidebarmenu{
  margin-top: 20px;
}

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

answered Sep 02 '13 at 12:35

Ivan Chernykh

41,617
13
134
146

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

score 2 · Accepted Answer · answered Sep 02 '13 at 12:36

2

You can use

#showmenu{
   margin-bottom:10px;
}

Demo

answered Sep 02 '13 at 12:36

Amit

15,217
8
46
68

score 2 · Answer 3 · answered Sep 02 '13 at 12:52

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.

score 1 · Answer 4 · answered Sep 02 '13 at 12:36

1

You could make it a block level element...

button{
    display: block;
}

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

answered Sep 02 '13 at 12:36

Billy Moon

57,113
24
136
237

score 1 · Answer 5 · answered Sep 02 '13 at 12:42

1

You can try this :

       <button id="showmenu" type="button">Show menu</button>
       <div class="sidebarmenu" style="margin-top:20px" >
            Some code
        </div>

answered Sep 02 '13 at 12:42

arifalam91

107
1
2
9

score 0 · Answer 6 · answered Sep 02 '13 at 12:36

0

You can display block your button

button{display:block}

answered Sep 02 '13 at 12:36

defau1t

10,593
2
35
47

score 0 · Answer 7 · answered Sep 02 '13 at 12:37

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!

answered Sep 02 '13 at 12:37

Mathew Thompson

55,877
15
127
148

@Cherniv That's different, the OP has stated he can change the markup – Mathew Thompson 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

Give a line break without using

7 Answers7

Linked