The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> floating 2 divs
MindyT
post Jan 28 2016, 03:41 PM
Post #1


Advanced Member
****

Group: Members
Posts: 165
Joined: 12-November 13
Member No.: 19,963



Hi, I have a footerInfo that floats left. Inside that div is a socialMedia div that I want to float left as well but it 's not doing that that. is that even Possible?

css
'
CODE

.footerInfo {
    float:left;
    margin-left:10%;
}
#socialMedia {
    float:left;
    display:inline;
}


html
CODE

function footer() {
    echo "<footer>";
    echo "<div class=\"footerInfo\">";
    echo "<img src=\"assets/footterLogo.png\" width=\"200\" height=\"75\" alt=\"logo\"  >";
    echo "</div>";
      echo "<div class=\"footerInfo\"> 260-273-2708 <br />";
      echo "<a href=\"mailto:Mindy@mediaservicesunlimited.com\">Mindy@mediaservicesunlimited.com</a>";
      echo "</div>";
       echo "<div class=\"footerInfo\">";    
    echo "<div id=\"socialMedia\">";    
    echo "<a href=\"https://www.facebook.com/MediaServicesUnlimited/?ref=hl\"><img src=\"assets/facebook.png\" width=\"40\" height=\"40\" alt=\"\"/></a>";
    echo "<div class=\"footerInfo\">    <a href=\"https://twitter.com/MediaServices4U\"><img src=\"assets/twitter.png\" width=\"40\" height=\"40\" alt=\"\"/></a>";
      echo "</div>";
      echo "</div>";     
    echo "</footer>";
}

User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Jan 28 2016, 04:18 PM
Post #2


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 18,133
Joined: 9-August 06
Member No.: 6



Yes, and it is floated but since you've nested floats without a width you won't see much effect of it. Floats shrinkwrap.

You are lacking one closing DIV tag here, so I'm not sure what it's supposed to be like.


CODE
<div class="footerInfo" style="background: yellow">
   <div id="socialMedia" style="background: pink">    
      <a href="https://www.facebook.com/MediaServicesUnlimited/?ref=hl"><img src="assets/facebook.png" width="40" height="40" alt="XXXXXX"/></a>
       <div class="footerInfo" style="background: lightblue">
           <a href="https://twitter.com/MediaServices4U"><img src="assets/twitter.png" width="40" height="40" alt="YYYYY"/></a>
      </div>
    </div>


But I interpret it as a DIV.footerInfo with a DIV#socialMedia inside that and DIV#socialMedia in turn contains yet another DIV.footerInfo. Maybe the first .footerInfo should be closed after #socialMedia? I added background colors so it's possible to see where things are. You won't see the pink background since it's covered by the other floats.


Also, can you please post HTML and not PHP? We have to edit all the PHP out to be able to test.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
MindyT
post Jan 28 2016, 09:40 PM
Post #3


Advanced Member
****

Group: Members
Posts: 165
Joined: 12-November 13
Member No.: 19,963



I added a closing div and modified the following css but nothing changed.

CODE


footer {
    width:100%;
    color:#000000;
    padding-top:6px;
    float:left;
}
.footerInfo {
    float:left;
    margin-left:10%;
}
#socialMedia {
    width:  10%;  
    float:left;
    display:inline;
}
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Jan 29 2016, 05:31 AM
Post #4


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 18,133
Joined: 9-August 06
Member No.: 6



So where did you add the closing DIV? And how do you want it to look?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
MindyT
post Jan 29 2016, 11:47 AM
Post #5


Advanced Member
****

Group: Members
Posts: 165
Joined: 12-November 13
Member No.: 19,963



I added it at the end of the code. I want the social media icons to line up horizontally not vertically.

CODE

    <footer>
           <div class=="footerInfo">
                <img src="assets/footterLogo.png" width="200" height="75" alt="logo"  >
       </div>
      <div class="footerInfo"> 260-273-2708 <br />
          <a href="mailto:Mindy@mediaservicesunlimited.com">Mindy@mediaservicesunlimited.com</a>
      </div>
       <div class="footerInfo">
              <div id="socialMedia">
               <a href="https://www.facebook.com/MediaServicesUnlimited/?ref=hl"><img src="assets/facebook.png" width="40" height="40" alt=""/></a>
    <div class="footerInfo">    <a href="https://twitter.com/MediaServices4U"><img src="assets/twitter.png" width="40" height="40" alt=""/></a>
      </div>
      </div>
      </div>
    </footer>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Jan 29 2016, 05:26 PM
Post #6


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 18,133
Joined: 9-August 06
Member No.: 6



I don't think you actually want that .footerInfo around the twitter icon. Remove it so it becomes like this.
CODE

<div class="footerInfo">
   <div id="socialMedia">
      <a href="https://www.facebook.com/MediaServicesUnlimited/?ref=hl"><img src="assets/facebook.png" width="40" height="40" alt="XXX"/></a>
      <a href="https://twitter.com/MediaServices4U"><img src="assets/twitter.png" width="40" height="40" alt="YYY"/></a>
   </div>
</div>


Then remove the whole line width: 10% from the #socialMedia rule in the style sheet. If you limit the width like that there isn't room for the floats to be side by side, so one of them drops.

I don't think you need all the other DIVs either, but the above will make it look like I think you want.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
MindyT
post Jan 29 2016, 08:55 PM
Post #7


Advanced Member
****

Group: Members
Posts: 165
Joined: 12-November 13
Member No.: 19,963



That worked, thanks so much!
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Jan 29 2016, 09:16 PM
Post #8


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 18,133
Joined: 9-August 06
Member No.: 6



Good. Just want to correct myself. You got me all floatified. wink.gif
There is no float drop, not anymore. It's just a matter of two links, or text if you will, breaking the line when the box gets too narrow.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 19th February 2019 - 03:22 AM