SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Wizard
    Join Date
    May 2012
    Posts
    1,106
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Post Div will not horizontally

    Hi, I need some help with you guys expert in css, my problem is that i could not align the one div in the Level Dept label and Input...I want that the submission date and input will be align horizontally in the level dept label and input...

    ex:

    Series Num: ______________

    Level Dept: ______________ Submissin date: ___________________

    that line is represented as input text.

    I hope this is clear for you guys.Thank you in advance.

    Code:
    <!DOCTYPE html>
    <html>
    	<head>
    			
    	 <style type="text/css">
    		 .outer-wrapper {
    		 width: 80%;
    		 margin: 58px 0 0 13px;
    		 
    		 
    		 }
    		 
    		 .outer-wrapper div {
    		 float: left;
    		 min-width: 1000px;
    		 padding: 0 0 0.75em 0;
    		 
    		 }
    		 
    		 .outer-wrapper label {
    		 width: 160px;
    		 float: left;
    		 padding: 8px 5px;
    		 
    		 }
    		 
    
    		 
    	 
    	 </style>
    				
    	</head>
    	 <body>
    		<div class="outer-wrapper">
    					<div>
    						<label>Series number</label>
    						<input type="text"/>
    					</div>
    
    					<div>
    						<label>Level Dept</label>
    						<input type="text"/>
    
    
    					</div>
    
    
    					<div>
    						<label>Submission date</label>
    						<input type="text"/>
    
    					</div>
    		</div>
    	 </body>
     </html>

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,344
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Did you mean something like this?

    Code:
    <!DOCTYPE html>
    <html>
    	 <head>
    	 <style type="text/css">
    .outer-wrapper {
    	width: 80%;
    	margin: 58px 0 0 13px;
    }
    .outer-wrapper div {
    	min-width: 1000px;
    	padding: 0 0 0.75em 0;
    }
    .outer-wrapper label {
    	width: 160px;
    	padding: 8px 5px;
    	text-align:right;
    }
    .outer-wrapper label,.outer-wrapper input{
    	display:inline-block;
    	vertical-align:middle;
    }
    </style>
    	 </head>
    	 <body>
    		<div class="outer-wrapper">
    				<div>
    						<label for="series">Series number:</label>
    						<input id="series" type="text"/>
    				</div>
    				<div>
    						<label for="level">Level Dept:</label>
    						<input id="level" type="text"/>
    						<label for="sub">Submission date:</label>
    						<input id="sub" type="text"/>
    				</div>
    		</div>
    </body>
    </html>

  3. #3
    SitePoint Wizard
    Join Date
    May 2012
    Posts
    1,106
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    Hi,

    Did you mean something like this?

    Code:
    <!DOCTYPE html>
    <html>
    	 <head>
    	 <style type="text/css">
    .outer-wrapper {
    	width: 80%;
    	margin: 58px 0 0 13px;
    }
    .outer-wrapper div {
    	min-width: 1000px;
    	padding: 0 0 0.75em 0;
    }
    .outer-wrapper label {
    	width: 160px;
    	padding: 8px 5px;
    	text-align:right;
    }
    .outer-wrapper label,.outer-wrapper input{
    	display:inline-block;
    	vertical-align:middle;
    }
    </style>
    	 </head>
    	 <body>
    		<div class="outer-wrapper">
    				<div>
    						<label for="series">Series number:</label>
    						<input id="series" type="text"/>
    				</div>
    				<div>
    						<label for="level">Level Dept:</label>
    						<input id="level" type="text"/>
    						<label for="sub">Submission date:</label>
    						<input id="sub" type="text"/>
    				</div>
    		</div>
    </body>
    </html>


    Hi, Paul thank you for the reply...wow you solved my problem yes this is it...I have question

    when to use this
    display:inline-block;
    what is the behavior on this I mean what will happen to the label and input if we use this.?

    Thank you in advance.

  4. #4
    SitePoint Wizard
    Join Date
    May 2012
    Posts
    1,106
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    Hi,

    Did you mean something like this?

    Code:
    <!DOCTYPE html>
    <html>
    	 <head>
    	 <style type="text/css">
    .outer-wrapper {
    	width: 80%;
    	margin: 58px 0 0 13px;
    }
    .outer-wrapper div {
    	min-width: 1000px;
    	padding: 0 0 0.75em 0;
    }
    .outer-wrapper label {
    	width: 160px;
    	padding: 8px 5px;
    	text-align:right;
    }
    .outer-wrapper label,.outer-wrapper input{
    	display:inline-block;
    	vertical-align:middle;
    }
    </style>
    	 </head>
    	 <body>
    		<div class="outer-wrapper">
    				<div>
    						<label for="series">Series number:</label>
    						<input id="series" type="text"/>
    				</div>
    				<div>
    						<label for="level">Level Dept:</label>
    						<input id="level" type="text"/>
    						<label for="sub">Submission date:</label>
    						<input id="sub" type="text"/>
    				</div>
    		</div>
    </body>
    </html>

    Hi,Paul there is a little problem in chrome,when i use the ctr+ mouse wheel the label submission date will go down. I attached the image so that you can see what i mean.can you help me please how to fixed this.

    Thank you in advance.
    Attached Images Attached Images

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,344
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by jemz View Post
    Hi, Paul thank you for the reply...wow you solved my problem yes this is it...I have question

    when to use this what is the behavior on this I mean what will happen to the label and input if we use this.?

    Thank you in advance.
    Hi,

    inline-block means that the element stays inline but that you can apply block properties like width and height to it. Its a bit like floating but without being removed from the flow.

    It's probably best if you read my article (from about 5 years ago) that explains it in details and offers fixes for ie6 and 7.

    It's a very useful property but does have a few quirks such as the white space nodes between blocks just like the space between words in a line of text.

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,344
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by jemz View Post
    Hi,Paul there is a little problem in chrome,when i use the ctr+ mouse wheel the label submission date will go down. I attached the image so that you can see what i mean.can you help me please how to fixed this.
    Hmm, I'd say that was perfect and no other method would work as well.

    Why are you clicking up and down with the mousewheel anyway Browsers are pretty bad at zooming at the best of times and its just not possible to have perfect layouts at zoomed sizes as browsers round the measurement up and down. The layout should be readable and usable but doesn't have to be pixel perfect at zoomed sizes.

    Anyway, if you want the label to expand in width and not wrap then you need to use em measurements so that the width scales proportionately to the font size. Set the width of the in ems and not pixels. If you don't know what the equivalent em width is then it is related to the font-size of the element. If the parents font-size is 16px then width:1em will equal 16px.

    Be aware though that this will cause the label to keep on expanding which may mean it is too big fro the section you have placed it in unless that is also controlled with ems.

  7. #7
    SitePoint Wizard
    Join Date
    May 2012
    Posts
    1,106
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Why are you clicking up and down with the mousewheel anyway
    So that i would know that my Css is good,I am also looking in other website and i tried to ctrl+mousewheel but it did not destroy like my label, i also tried sitepoint and it did not also destroy...that's why i am curious on how to fixed this problem.

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,344
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by jemz View Post
    So that i would know that my Css is good,
    Sorry that was a joke that obviously missed its mark

    I am also looking in other website and i tried to ctrl+mousewheel but it did not destroy like my label, i also tried sitepoint and it did not also destroy...that's why i am curious on how to fixed this problem.
    No sitepoint is misplaced more or less straight away for me (see attached).

    Chrome on the other hand does not render like your image for me with the code I gave you but of course it depends if you are zooming the layout or zooming text only which will depend on your browsers settings.

    Irrespective of the above I gave you the answer anyway and just size the label width in ems. However, I prefer the image you sent in chrome where the label breaks to a new line and the input remains vertically aligned (due to the code I gave you).

    Of course it also depends on where you are placing this code and what kind of container it is in. You'll have to provide a link to your example and to the example where you say it doesn't break so we can see what you want
    Attached Images Attached Images

  9. #9
    SitePoint Wizard
    Join Date
    May 2012
    Posts
    1,106
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    Sorry that was a joke that obviously missed its mark



    No sitepoint is misplaced more or less straight away for me (see attached).

    Chrome on the other hand does not render like your image for me with the code I gave you but of course it depends if you are zooming the layout or zooming text only which will depend on your browsers settings.

    Irrespective of the above I gave you the answer anyway and just size the label width in ems. However, I prefer the image you sent in chrome where the label breaks to a new line and the input remains vertically aligned (due to the code I gave you).

    Of course it also depends on where you are placing this code and what kind of container it is in. You'll have to provide a link to your example and to the example where you say it doesn't break so we can see what you want


    Hi oh i see,... ...in this forum i tried to ctrl+mouse wheel...

  10. #10
    SitePoint Wizard
    Join Date
    May 2012
    Posts
    1,106
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    I prefer the image you sent in chrome where the label breaks to a new line and the input remains vertically aligned (due to the code I gave you).
    Thank you paul,...


Bookmarks

Posting Permissions

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