Advertisement
Advertisement


How do you create a hidden div that doesn't create a line break or horizontal space?


Question

I want to have a hidden checkbox that doesn't take up any space on the screen.

If I have this:

<div id="divCheckbox" style="visibility: hidden">

I don't see the checkbox, but it still creates a new line.

If I have this:

<div id="divCheckbox" style="visibility: hidden; display:inline;">

it no longer creates a new line, but it takes up horizontal space on the screen.

Is there a way to have a hidden div that takes up no room (vertical or horizontal?

2017/04/01
1
361
4/1/2017 7:53:51 AM

Accepted Answer

Use display:none;

<div id="divCheckbox" style="display: none;">
  • visibility: hidden hides the element, but it still takes up space in the layout.

  • display: none removes the element completely from the document, it doesn't take up any space.

733
1/2/2010 5:02:32 PM

Since the release of HTML5 one can now simply do:

<div hidden>This div is hidden</div>

Note: This is not supported by some old browsers, most notably IE < 11.

Hidden Attribute Documentation (MDN,W3C)

2020/05/24

Use style="display: none;". Also, you probably don't need to have the DIV, just setting the style to display: none on the checkbox would probably be sufficient.

2010/01/02

In addition to CMS┬┤ answer you may want to consider putting the style in an external stylesheet and assign the style to the id, like this:

#divCheckbox {
display: none;
}
2010/01/02

Since you should focus on usability and generalities in CSS, rather than use an id to point to a specific layout element (which results in huge or multiple css files) you should probably instead use a true class in your linked .css file:

.hidden {
visibility: hidden;
display: none;
}

or for the minimalist:

.hidden {
display: none;
}

Now you can simply apply it via:

<div class="hidden"> content </div>
2014/01/29

Consider using <span> to isolate small segments of markup to be styled without breaking up layout. This would seem to be more idiomatic than trying to force a <div> not to display itself--if in fact the checkbox itself cannot be styled in the way you want.

2010/01/02

Source: https://stackoverflow.com/questions/1992114
Licensed under: CC-BY-SA with attribution
Not affiliated with: Stack Overflow
Email: [email protected]