Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

Tags:

html

hidden

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?

like image 627
leora Avatar asked Jan 02 '10 17:01

leora


People also ask

How do I hide a div but keep the space?

The visibility: hidden rule, on the other hand, hides an element, but the element will still take up space on the web page. If you want to hide an element but keep that element's space on the web page, using the visibility: hidden; rule is best.

How do I make a div hidden?

We hide the divs by adding a CSS class called hidden to the outer div called . text_container . This will trigger CSS to hide the inner div.

Which can be used to hide a div object?

The hidden attribute is a Global Attribute, and can be used on any HTML element.

Can div have hidden attribute?

The hidden attribute hides the <div> element. You can specify either 'hidden' (without value) or 'hidden="hidden"'. Both are valid. A hidden <div> element is not visible, but it maintains its position on the page.


1 Answers

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.

like image 158
Christian C. Salvadó Avatar answered Sep 18 '22 00:09

Christian C. Salvadó