Make a div the size of its content

Question

I'm working on some HTML where some divs are all lined up when the screen is wide, then they stack and float left or right when the screen is small.

They have some space above and below when the screen is wide, but the problem is that top and bottom margin seems to disappear when the screen is thinner and they stack. When I inspect the element in Firefox, it says the outer divs are smaller than the content, which I'm guessing has something to do with the problem.

Here's a jsfiddle of my code. Change the Result window width to see it change.

Here's the code

<div id="controls"> <div id="control_left"> <div id="play_button" class="button">play</div> <div id="step_button" class="button">step</div> </div> <div id="control_right"> <div id="stop_button" class="button">stop</div> <div id="restart_button" class="button">restart</div> </div> <br/> </div> <div id="instruction1" class="instruction top_instruction"> <div class="instructionNumber"></div> <div class="instructionType"> <FORM NAME="myform"> <SELECT NAME="mylist"> <OPTION VALUE="m1">VAL1 <OPTION VALUE="m2">VAL2 <OPTION VALUE="m3">VAL3 </SELECT> </FORM> </div> <input class="reg" type="text" /> <input class="reg" type="text" /> <input class="reg" type="text" /> </div> #play_button { float: left; } #step_button { float: right; } #stop_button { float: left; } #restart_button { float: right; } .button { text-align: center; width: 45%; background-color: #aaa; cursor: pointer; box-sizing: border-box; } #controls { margin-top: 5px; margin-bottom: 5px; box-sizing: border-box; height: auto; width: auto; } #control_left { box-sizing: border-box; height: auto; width: auto; } #control_right { box-sizing: border-box; height: auto; width: auto; } @media screen and (min-width: 600px) { #control_left { float: left; width: 45%; } #control_right { float: right; width: 45%; } } .instruction{ width: 100%; font-family:courier; font-weight:bold; margin-right: auto; margin-left: auto; border-right: 2px solid #000000; border-left: 2px solid #000000; border-bottom: 2px solid #000000; display: inline-block; } .top_instruction{ border-top: 2px solid #000; }

How do I get space below beneath the controls div, and beneath each button when they stack?

Sajad Karuthedath · Accepted Answer · 2014-07-11 19:36:01Z

1

Just give the div a margin.

div { margin:2%; }

Demo

more apt will be applying margin for the button class

.button{ margin:2%; }

edited Jul 11, 2014 at 19:36

answered Jul 11, 2014 at 19:25

Sajad Karuthedath

16.2k4 gold badges35 silver badges50 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

faehnrich Over a year ago

This worked. I swear I tried margins, ah well. Thanks! One thing I noticed though is when you inspect the outer divs they still are smaller than the content though, but I'm not really concerned as long as it works.

Sajad Karuthedath Over a year ago

@faehnrich : glad it worked for you..!! u are welcome :)

miguelarcaccs · Accepted Answer · 2014-07-11 19:34:25Z

add the margin attribute to the button class

.button { text-align: center; /*border-radius: 1%;*/ width: 45%; background-color: #aaa; cursor: pointer; box-sizing: border-box; margin-top: 5px; margin-bottom: 5px;

}

Sajad Karuthedath · Accepted Answer · 2014-07-11 19:37:18Z

You can use 'margin' to create space between buttons as they stack. Add this line off CSS to your buttons.

.button { margin: 2%; /*you can increase or decrease this percentage*/ }

This will add space between your buttons.

Collectives™ on Stack Overflow

Make a div the size of its content

3 Answers 3

2 Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Related