5 replies [Last post]
jasonxweb
jasonxweb's picture
Offline
newbie
Last seen: 3 years 15 weeks ago
Timezone: GMT-7
Joined: 2014-05-27
Posts: 7
Points: 13

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/

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

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 2 weeks 2 days ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5342
Points: 2963

Hi jasonxweb, 1) you are

Hi jasonxweb,

1) you are floating so without a specific width it will just take up whatever pace it needs to wrap around it's contents.
If you leave it as display:block and don't float and don't set with to auto it will fill all horizontal space.

2) sorry i don't see a div with a thick dashed orange border ...

jasonxweb
jasonxweb's picture
Offline
newbie
Last seen: 3 years 15 weeks ago
Timezone: GMT-7
Joined: 2014-05-27
Posts: 7
Points: 13

Hi Tony, Thanks for the

Hi Tony,

Thanks for the reply, I will give it a try.

For Question 2, I mean the smaller orange, green and blue divs that are directly inside the bigger red div (on the upper right-hand corner). The orange ones line up horizontally okay, but the green one doesn't, and the blue one is broken into two pieces. Do you know why this is happening?

Thanks,

Jason

jasonxweb
jasonxweb's picture
Offline
newbie
Last seen: 3 years 15 weeks ago
Timezone: GMT-7
Joined: 2014-05-27
Posts: 7
Points: 13

Hi Tony, Sorry if I wasn't

Hi Tony,

Sorry if I wasn't clear in my original post.

My goal is to make all the elements inside the div-with-thick-red-dashed-border line up in one horizontal row, instead of the 3 rows that are appearing now.

Thanks,

Jason

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 2 weeks 2 days ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5342
Points: 2963

Try

Try this:

.jw-3-button-pages{
display:inline-block
}

jasonxweb
jasonxweb's picture
Offline
newbie
Last seen: 3 years 15 weeks ago
Timezone: GMT-7
Joined: 2014-05-27
Posts: 7
Points: 13

Thanks Tony for the

Thanks Tony for the information!

In the end I used span to get the appearance I was going for.

Thanks.