Solved

css div within div - newbie

Posted on 2014-04-08
10
414 Views
Last Modified: 2014-04-08
In trying to understand positioning of divs, I put together a little test page.  The first example seems to work fine, but the second example in my code does not have the 'More Info' in the correct place.  It is currently covering the text within the div.  I tried putting some floats, spans, and clears, but I am just guessing at where they belong because I still do not understand exactly how they work.  I am thinking one of my problems is that while the image in 'topLeft' is positioned relative to the outer div correctly, the 'More Info' div is positioned relative to the text, not the outer div, right??

<style>

    .mainBox {
        position:relative;
        border:1px solid black;
        display:inline-block;
		width: 200px;
		height: 100px;
		clear:left;
    }
        
    .clickForMore {
        position:absolute;
		display:inline-block;
        bottom:0;
        right:0;
        width:100px;
        heigth: 10px;
        display:block;
        background-color: red;
		text-align: center;
    }
    
	.clearLeft {
		clear:left;
	}
    
	.topLeft {
        position:absolute;
        top:0;
        left:0;       
		float: left;		
    }

</style>

Example #1 - image takes whole block and link in bottom right</br>
<div class="mainBox">
   <img src="images\MentalHealthAmerica.gif" width="200px" height="100px"  />
   <div class="clickForMore"><a href="#">More info</a></div> 
    
</div>    
<br/><br/><br/><br/>

Example #2 - image on top left, text in the middle, and link in bottom right</br>
<div class="mainBox" >
   <div class="topLeft">
        <img src="images\MentalHealthAmerica.gif" width="50px" height="50px"  />
        <div class="clickForMore"><a href="#">More info</a></div>
		<span class="clearLeft">Here you would put some text to give features, description, etc.</span>
		 
   </div>
</div>    

Open in new window

0
Comment
Question by:UniqueData
  • 6
  • 4
10 Comments
 
LVL 83

Accepted Solution

by:
Dave Baldwin earned 500 total points
ID: 39987316
'absolute' positioning is relative to the block element that contains it.  However, 'absolute' takes it 'out of the flow' so it can cover other elements (depending on the 'z-index').  In your two examples, the 'absolute' elements do Not come after the other items but are positioned independently from them.
0
 
LVL 7

Author Comment

by:UniqueData
ID: 39987348
so in example two, how would I get the text to start immediately to the right of the image in the top left, then make sure the text does not get covered by the 'More Info'? Does the text need to be within another div instead of span?

I found a nice tutorial but not exactly what I am looking for:
      http://www.webdevdoor.com/html-css/css-position-child-div-parent/
0
 
LVL 7

Author Comment

by:UniqueData
ID: 39987363
I see that I mistakenly nested the text inside of the 'topLeft' div.  I am getting closer:

<style>

    .mainBox {
        position:relative;
        border:1px solid black;
        display:inline-block;
		width: 200px;
		height: 100px;
		clear:left;
    }
        
    .clickForMore {
        position:absolute;
		display:block;
        bottom:0;
        right:0;
        width:100px;
        heigth: 10px;
        display:block;
        background-color: red;
		text-align: center;
    }
        
	.topLeft {
        position:absolute;
		display:inline-block;
        top:0;
        left:0;       		
    }

</style>

Example #1 - image takes whole block and link in bottom right</br>
<div class="mainBox">
   <img src="images\MentalHealthAmerica.gif" width="200px" height="100px"  />
   <div class="clickForMore"><a href="#">More info</a></div> 
    
</div>    
<br/><br/><br/><br/>

Example #2 - image on top left, text in the middle, and link in bottom right</br>
<div class="mainBox" >
	   <div class="topLeft">
			<img src="images\MentalHealthAmerica.gif" width="50px" height="50px"  />
		</div>
		<div>Here you would put some text to give features, description, etc.</div>
		<div class="clickForMore"><a href="#">More info</a></div>
</div>    

Open in new window

0
ScreenConnect 6.0 Free Trial

Check out the updates in one game-changing release, ScreenConnect 6.0, based on partner feedback. New features include a redesigned UI that improves session organization and overall user experience. See the enhancements for yourself!

 
LVL 83

Expert Comment

by:Dave Baldwin
ID: 39987380
I might write it like this but it is up to you to see that the 'More Info' is positioned where it doesn't cover anything.  I'm not sure that "clearLeft" does anything with an inline element.
Example #2 - image on top left, text in the middle, and link in bottom right</br>
<div class="mainBox" >
   <div class="topLeft"><div class="clickForMore"><a href="#">More info</a></div>
        <img src="images\MentalHealthAmerica.gif" width="50px" height="50px" /><span class="clearLeft">Here you would put some text to give features, description, etc.</span>
   </div>
</div>    

Open in new window

0
 
LVL 7

Author Comment

by:UniqueData
ID: 39987393
now I understand what you mean by absolute taking the element out of the flow.  So for .topLeft I didn't use absolute, but instead changed it to float.  Then the text would start to the right of it automatically.

I also think I understand what you mean by needing to make sure the 'more info' doesn't cover anything.  I would need to make the outer div taller if needed since it needs to be absolute which would take it out of the flow.

The code below seems to give me exactly what I am looking for, but is it correct or just a fluke that it works?

<style>

    .mainBox {
        position:relative;
        border:1px solid black;
        display:inline-block;
		width: 200px;
		height: 100px;
    }
        
    .clickForMore {
        position:absolute;
		display:block;
        bottom:0;
        right:0;
        width:100px;
        heigth: 10px;
        display:block;
        background-color: red;
		text-align: center;
    }
        
	.topLeft {
		display:inline-block;
		float:left;
    }

</style>

Example #1 - image takes whole block and link in bottom right</br>
<div class="mainBox">
   <img src="images\MentalHealthAmerica.gif" width="200px" height="100px"  />
   <div class="clickForMore"><a href="#">More info</a></div> 
    
</div>    
<br/><br/><br/><br/>

Example #2 - image on top left, text in the middle, and link in bottom right</br>
<div class="mainBox" >
	   <div class="topLeft">
			<img src="images\MentalHealthAmerica.gif" width="50px" height="50px"  />
		</div>
		<div >Here you would put some text to give features, description, etc.</div>
		<div class="clickForMore"><a href="#">More info</a></div>
</div>    

Open in new window

0
 
LVL 7

Author Comment

by:UniqueData
ID: 39987400
I also noticed I can take out the lines with inline-block and block and nothing changes, so they were not needed (that is my next thing to research then)
0
 
LVL 83

Expert Comment

by:Dave Baldwin
ID: 39987401
A little of both.  A 'floated' div normally needs a specific width for the next div to 'float' properly against it.  Note also that 'float's depend on there being enough room for them to float.  If there isn't, they will move to the space under the first floated element and no longer be 'inline' with each other.
0
 
LVL 7

Author Comment

by:UniqueData
ID: 39987428
Ok, thanks.  Wow..how are you suppose to remember all these rules???  :)

so here is my final code taking everything you suggested:

<style>

    .mainBox {
        position:relative;
        border:1px solid black;
		width: 200px;
		height: 100px;
    }
        
    .clickForMore {
        position:absolute;
        bottom:0;
        right:0;
        width:100px;
        background-color: red;
		text-align: center;
    }

	.innerText {
		padding-left:10px;
		padding-top: 10px;
	}
	
	.topLeft {
		float:left;
		width:50px;
		height:50px;
		padding-right: 10px;
    }

</style>

Example #1 - image takes whole block and link in bottom right</br>
<div class="mainBox">
   <img src="images\MentalHealthAmerica.gif" width="200px" height="100px"  />
   <div class="clickForMore"><a href="#">More info</a></div> 
</div>    
<br/><br/><br/><br/>

Example #2 - image on top left, text in the middle, and link in bottom right</br>
<div class="mainBox" >
		<img class="topLeft" src="images\MentalHealthAmerica.gif" />
		<div class="innerText">Here you would put some text to give features, description, etc.</div>
		<div class="clickForMore"><a href="#">More info</a></div>
</div>    

Open in new window

0
 
LVL 83

Expert Comment

by:Dave Baldwin
ID: 39987441
I don't remember them all, I look them up when something doesn't work.  'Official' standards here:  http://www.w3.org/standards/webdesign/htmlcss   Easier to understand examples and tutorials here:  http://www.w3schools.com/css/default.asp
0
 
LVL 7

Author Comment

by:UniqueData
ID: 39987533
in case another newbie stumbles across this, just added some cool effects:

<style>

    .mainBox {
        position:relative;
        border:1px solid black;
		width: 200px;
		height: 100px;
    }
        
	.clickForMore:link {
        position:absolute;
        bottom:0;
        right:0;
        width:100px;
		text-align: center;
		text-decoration : none;
		color : #000000; /* black text color */
		background-color : #3399FF; 
		border-top : 1px solid #ccffcc; /* highlight color */
		border-left : 1px solid #ccffcc; /* highlight color */
		border-bottom : 1px solid #003300; /* shadow color */
		border-right : 1px solid #003300; /* shadow color */
	}

	.clickForMore:hover {
		color : #000000; /* black text color */
		background-color : #99cc99; /* desaturated color */
		border-top : 2px solid #003300; /* shadow color */
		border-left : 2px solid #003300; /* shadow color */
		border-bottom : 2px solid #ccffcc; /* highlight color */
		border-right : 2px solid #ccffcc; /* highlight color */
	}

	.clickForMore:focus {
		padding : 4px;
		text-decoration : none;
		color : #000000; /* black text color */
		background-color : #ffff99; /* set to a pastel yellow */
		border-top : 2px solid #ffffcc; /* highlight color */
		border-left : 2px solid #ffffcc; /* highlight color */
		border-bottom : 2px solid #666633; /* shadow color */
		border-right : 2px solid #666633; /* shadow color */
	}	 
	
	.innerText {
		padding-left:10px;
		padding-top: 10px;
	}
	
	.topLeft {
		float:left;
		width:50px;
		height:50px;
		padding-right: 10px;
    }

</style>

Example #1 - image takes whole block and link in bottom right</br>
<div class="mainBox">
   <img src="images\MentalHealthAmerica.gif" width="200px" height="100px"  />
   <a href="#" class="clickForMore">More info</a>
</div>    
<br/><br/><br/><br/>

Example #2 - image on top left, text in the middle, and link in bottom right</br>
<div class="mainBox" >
		<img class="topLeft" src="images\MentalHealthAmerica.gif" />
		<div class="innerText">Here you would put some text to give features, description, etc.</div>
		<a href="#" class="clickForMore" >More info</a>
</div>    

Open in new window

0

Featured Post

Optimizing Cloud Backup for Low Bandwidth

With cloud storage prices going down a growing number of SMBs start to use it for backup storage. Unfortunately, business data volume rarely fits the average Internet speed. This article provides an overview of main Internet speed challenges and reveals backup best practices.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Border and image sizing 5 20
URGENT - Wordpress site missing  theme 9 41
Best way to minify CSS with out breaking it 7 36
Mobile page Scrolling down when refreshing 4 33
Have you tried to learn about Unicode, UTF-8, and multibyte text encoding and all the articles are just too "academic" or too technical? This article aims to make the whole topic easy for just about anyone to understand.
This article discusses how to create an extensible mechanism for linked drop downs.
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

810 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question