Div will not horizontally

HTML & CSS
1

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.


<!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

Hi,

Did you mean something like this?


<!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

Hi, Paul thank you for the reply…wow:nanaman: 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

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.

5

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

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 :slight_smile: 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

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.:headbang:

8

Sorry that was a joke that obviously missed its mark :slight_smile:

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.:headbang:

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 :slight_smile:

9

Hi oh i see,… :blush: …in this forum i tried to ctrl+mouse wheel…:wink:

10

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,…:slight_smile: