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

html hidden
leora picture leora · Jan 2, 2010 · Viewed 995.6k times · Source

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?

Answer

Christian C. Salvad&#243; picture Christian C. Salvadó · Jan 2, 2010

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.

Related questions

How to get current formatted date dd/mm/yyyy in Javascript and append it to an input

I would like to add a current date to a hidden HTML tag so that it can be sent to the server: <input type="hidden" id="DATE" name="DATE" value="WOULD_LIKE_TO_ADD_DATE_HERE"> How can …

Read More
Hidden property of a button in HTML

I am trying to show three buttons on one button click. Before a button click all three buttons are hidden. I set the hidden property and I am also calling a function on a button click. The problem is that …

Read More
Make one div visible and another invisible

I have two div tags, one is for the search and the other is for the results. What I need is for when the submit button is clicked the results are returned and placed into the results div (with an …

Read More