Jump to content
jasonxweb

Div with "width: auto;" not auto-expanding & "display: inline;" not working on its own. Why is this happening?

Recommended Posts

Hi everyone,

 

Can anyone tell me why my div is not auto expanding to fit its contents, even though I set "width: auto;" ?

Also, why does my "display: inline;" not work?

 

You can see what I mean here: http://www.jasonwangart2.blogspot.ca/

 

Basically, I am trying to make it so that all the elements inside the div-with-thick-red-dashed-border will appear in one horizontal row.

 

Question 1: I set the div-with-thick-red-dashed-border to "width: auto;", but the inner divs are wrapping for some reason, and the div-with-thick-red-dashed-border is not expanding horizontally to contain more divs.

 

Question 2: Also, I set the div-with-thick-orange-dashed-border, the div-with-thick-green-dashed-border, and the div-with-thick-blue-dashed-border to "display: inline;", but they are wrapping and breaking up.

 

Does anyone know the answers to the 2 above questions?

 

My goal is to make all the elements inside the div-with-thick-red-dashed-border line up in one horizontal arrangement.

 

The code is below.

 

Thank you very much,

Jason

<!doctype html>	<style>/* HEADER OUTER BOX */	.jw-1-header-box	{		border: 1px dashed red;				width:100%;				font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;		color: rgba(0,0,0,1);	}/* GRAPHICS */	.jw-2-graphics-bar	{		border: 1px dashed purple;  						width: 100%;		height: 0px;			overflow: visible;	}	.jw-3-circle-large	{		position: relative;    	left: 10px;    	top: -200px;		width: 270px;		height: 270px;		background-color: rgba(180,200,255,1);		border-radius: 135px;	}	/* NAVIGATION */  				.jw-2-nav-bar	{		border: 1px dashed cyan;  						width: 100%;			overflow: hidden;	}		.jw-3-nav-bar-left-section	{		border: 1px dashed maroon;				display: inline;		float: left;  	}	.jw-3-nav-bar-right-section	{		border: 5px dashed red;		width: auto;		display: inline;		float: right;  	}	/* HOME BUTTON */	.jw-3-button-home a:link,	.jw-3-button-home a:visited	{		border: 1px dashed purple;		position: relative;		z-index: 1;				font-size: 41px;		color: rgba(80,100,155,1);	}            	.jw-3-button-home a:hover,	.jw-3-button-home a:active	{    					     		color: rgba(0,0,0,1);  		text-decoration: none; /* to remove underline on hover */  					  	}	/* PAGES */	.jw-3-button-pages a:link,	.jw-3-button-pages a:visited	{		border: 5px dotted orange;		margin: 0px 10px 0px 10px;		display: inline;		font-size: 18px;		color: rgba(80,100,155,1);	}            	.jw-3-button-pages a:hover,	.jw-3-button-pages a:active	{		color: rgba(0,0,0,1);          		text-decoration: none; /* to remove underline on hover */	}			.jw-3-social-text-box	{		border: 5px dotted green;		margin: 0px 10px 0px 10px;				display: inline;		 			font-size: 18px;		color: rgba(0,0,0,0.7);						}	.jw-3-social-icon-box	{		border: 5px dotted blue;		margin: 0px 10px 0px 10px;					display: inline;				font-size: 16px;	/* need this to align block-1 */					}	.jw-opacity-link a:link,	.jw-opacity-link a:visited	{		border: 0px solid black;					width: 30px;						opacity: 0.45;	}	.jw-opacity-link a:hover,	.jw-opacity-link a:active	{		border: 0px solid black;				text-decoration: none; /* to remove the little line */		opacity: 1.0;	}		img /* need this to align icon image */	{		vertical-align:top; /* top or bottom */	}/* DIVIDER */	.jw-2-divider-1	{			border: 1px dashed violet;				width: 100%;		padding: 50px 0px 0px 0px;		text-align: center; 	}			.jw-3-circle-small	{		display: inline-block;		width: 10px;		height: 10px;		background-color: rgba(171,225,250,1);		border-radius: 5px;		margin: 0px 50px 0px 50px;	}		/* UPDATE */	.jw-2-update-bar	{		border: 1px dashed pink; 				width:100%;		text-align: center;	}				.jw-3-update-text-box	{		border: 1px dashed turquoise;			      		font-size: 16px;		color: rgba(0,0,0,1);		}</style>	<!-- HTML --><!-- MAIN BOX -->	<div class="jw-1-header-box"><!-- GRPHICS -->	<div class="jw-2-graphics-bar">		<div class="jw-3-circle-large"></div>		</div><!-- NAVIGATION -->	<div class="jw-2-nav-bar">		<div class="jw-3-nav-bar-left-section">							<div class="jw-3-button-home">										<a href="http://www.jasonwangart.com">Jason Wang Art</a>			</div>					</div>		<div class="jw-3-nav-bar-right-section">								<div class="jw-3-button-pages">									<a href="http://www.jasonwangart.com/search/label/illustration">illustrations</a>								<a href="http://www.jasonwangart.com/search/label/tutorial">tutorials</a>						<a href="http://www.jasonwangart.com/search/label/reference">references</a>						<a href="http://www.jasonwangart.com/p/about-web.html">about & contact</a>					</div>																			<div class="jw-3-social-text-box">					Follow me on										</div>								<div class="jw-3-social-icon-box">				<div class="jw-opacity-link">							<a href="http://www.facebook.com/jasonwangart">						<img src="http://2.bp.blogspot.com/-GLgaU-VPshc/U4N08qWLn1I/AAAAAAAAAZ8/--FxtOA2W8g/s1600/LOGO+facebook+50+c.png"					width="24px" height="24px" alt="facebook"/>					</a>				</div>					</div>							</div>			</div>			<!-- DIVIDER -->							<div class="jw-2-divider-1">			<div class="jw-3-circle-small"></div>		<div class="jw-3-circle-small"></div>		<div class="jw-3-circle-small"></div>		</div><!-- UPDATE 	-->			<div class="jw-2-update-bar">		<div class="jw-3-update-text-box">			Berry Season 9 coming soon!			</div>	</div>		</div>	</!doctype>
Edited by jasonxweb

Share this post


Link to post
Share on other sites

Width/height will not work for displayed inline element, float will cause targeted element to shrink to content so width: auto; won't make floated element act like block element and stretch to available width within its parent.

 

.jw-3-button-pages, .jw-opacity-link are block elements, block elements force a break at start and end and stretch to width available to them so your inline outer element stretches to the same width , you should not use block elements within inline, change to inline styling or better still an iline element like span for instance.

Edited by dsonesuk

Share this post


Link to post
Share on other sites

Just noticed document should go like this

 

 

<!doctype html><html><head><title>document  title</title><!--css must be here, jasvascript can also placed here --></head><body> <!-- website page html content that is viewable is placed here --> </body></html>

 

Note: NO closing tag for doctype

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...