Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 11 of 11
  1. #1
    Regular Coder
    Join Date
    May 2009
    Posts
    143
    Thanks
    14
    Thanked 1 Time in 1 Post

    quick question - empty div

    Code:
    <html>
    <head>
    <style type="text/css">
    body{text-align:center;}
    
    .main{width:20%; margin-left:auto; margin-right:auto; border:1px solid red;}
    .check{width:7%; float:left;}
    .label{width:25%; float:left; text-align:right;}
    .donnees{width:65%; float:left;}
    .donnees select{width:100%;}
    .donnees input{width:100%;}
    </style>
    </head>
    <body>
    	<div class='main'>
    		<div class='check'><input type='checkbox' /></div><div class='label'><label>TEST: </label></div><div class='donnees'><select><option>blablablalbla</option></select></div><div style='clear:both;'></div>
    		<div class='check'><input type='checkbox' /></div><div class='label'><label>Domaine: </label></div><div class='donnees'><select><option>blablab</option></select></div><div style='clear:both;'></div>
    		<div class='check'><input type='checkbox' /></div><div class='label'><label>CS: </label></div><div class='donnees'><input type='text' /></div><div style='clear:both;'></div>
    		<div class='check'><!-- NOTHING HERE --></div><div class='label'><label>Tic: </label></div><div class='donnees'><input type='checkbox' /></div><div style='clear:both;'></div>
    	</div>
    </body>
    </html>
    basic stuff, works in IE, I want to div width to be applied even tho there is no content in that div.
    Last edited by Jahren; 06-16-2009 at 08:42 PM.

  • #2
    New Coder
    Join Date
    Jun 2009
    Location
    Newcastle
    Posts
    18
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Have you tried just using &nbsp; instead of <!-- NOTHING HERE -->

    Not sure if that will solve your problem, think that's what your trying to achieve.

    New code


    Code:
    <html>
    <head>
    <style type="text/css">
    body{text-align:center;}
    
    .main{width:20%; margin-left:auto; margin-right:auto; border:1px solid red;}
    .check{width:7%; float:left;}
    .label{width:25%; float:left; text-align:right;}
    .donnees{width:65%; float:left;}
    .donnees select{width:100%;}
    .donnees input{width:100%;}
    </style>
    </head>
    <body>
    	<div class='main'>
    		<div class='check'><input type='checkbox' /></div><div class='label'><label>TEST: </label></div><div class='donnees'><select><option>blablablalbla</option></select></div><div style='clear:both;'></div>
    		<div class='check'><input type='checkbox' /></div><div class='label'><label>Domaine: </label></div><div class='donnees'><select><option>blablab</option></select></div><div style='clear:both;'></div>
    		<div class='check'><input type='checkbox' /></div><div class='label'><label>CS: </label></div><div class='donnees'><input type='text' /></div><div style='clear:both;'></div>
    		<div class='check'><!-- NOTHING HERE --></div><div class='label'><label>Tic: </label></div><div class='donnees'><input type='checkbox' /></div><div style='clear:both;'></div>
    	</div>
    </body>
    </html>

  • #3
    Regular Coder
    Join Date
    May 2009
    Posts
    143
    Thanks
    14
    Thanked 1 Time in 1 Post
    yep, that did it lol
    the comment was added for the sake of visibility here btw ^^

    I tried using a regular space but it gets trimmed in the page. ehe

  • #4
    New Coder
    Join Date
    Jun 2009
    Location
    Newcastle
    Posts
    18
    Thanks
    2
    Thanked 0 Times in 0 Posts
    I noticed there I posted the exact same code without modifying it! Sorry mate haha!

    Glad you got it sorted though

  • #5
    Senior Coder
    Join Date
    Oct 2005
    Posts
    1,340
    Thanks
    0
    Thanked 61 Times in 60 Posts
    Don't use breaks cause that's not what they're for. The reason it didn't work is because your width has no reference set. It works in IE because IE is crap.

  • #6
    Regular Coder
    Join Date
    May 2009
    Posts
    143
    Thanks
    14
    Thanked 1 Time in 1 Post
    all widths are relative widths.
    so I don't understand :S

  • #7
    Senior Coder
    Join Date
    Oct 2005
    Posts
    1,340
    Thanks
    0
    Thanked 61 Times in 60 Posts
    Percentage widths are relative to the parent. What is the parent set to? If the parent is not set to a definitive width, then nothing happens.

  • #8
    Regular Coder
    Join Date
    May 2009
    Posts
    143
    Thanks
    14
    Thanked 1 Time in 1 Post
    I don't want to use fixed width, I just hate the concept. People use different resolution so I adapt my design.

  • #9
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    You should set

    html , body{
    width:100%;
    height:100%;
    }

    at the start of your code , or the divs will not know what to be 30% of.

    If I ask you for 30%, you will want to know "30% of what?"

    Frank
    Last edited by effpeetee; 06-18-2009 at 02:24 PM.
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • Users who have thanked effpeetee for this post:

    Jahren (06-18-2009)

  • #10
    Senior Coder
    Join Date
    Oct 2005
    Posts
    1,340
    Thanks
    0
    Thanked 61 Times in 60 Posts
    I didn't say a fixed width. This is what I meant: when you set percentages, you are saying percentage of what? The answer is always percent of the parent so saying 'width:7%' means seven percent of the width of the parent, but what is the width of the parent?

    You can set that to 100% so it's still fluid but 100% of what? It's parent!

    This finally works its way up to the viewport which is always 100% of the browser width. Perhaps the best thing for you to do is, in your CSS:
    html,body{width:100%}

    That will set its width to html which is equal to the width of the viewport but must be explicitly set. All of the elements below it must have their width set to something, say 100%, so it cascades down to that particular element.
    Last edited by drhowarddrfine; 06-18-2009 at 02:27 PM.

  • Users who have thanked drhowarddrfine for this post:

    Jahren (06-18-2009)

  • #11
    Regular Coder
    Join Date
    May 2009
    Posts
    143
    Thanks
    14
    Thanked 1 Time in 1 Post
    Oh, That I did not know
    i'll try this now.

    thanks

    well, that doesn't change much :P
    removing the &nbsp; makes its width go 0 again
    Last edited by Jahren; 06-18-2009 at 02:29 PM.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •