Home/ Questions/Q 6556409
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-25T12:56:28+00:00

I am trying to adjust my css to float an image to the right,

  • 0

I am trying to adjust my css to float an image to the right, but I can’t seem to find the right combination. It is instead pushing the text on the left to the bottom of the page. Is there a better way to accomplish this?

   #experiential_page_container{float:left; width:100%; padding-top:235px;}
#experiential_page_container .marketing_details{float:left; width:695px; padding-left:12px;}
#experiential_page_container .marketing_details h1{float:left; width:100%;font:52px/64px Myriad Pro, Arial, Helvetica, sans-serif; letter-spacing:-2px; color:#fff;text-shadow:0 0 25px #000; padding-bottom:16px; padding-left: 70px;}
#experiential_page_container .marketing_details h1 span{float:left; width:430px; padding-left:80px;font:21px/23px Myriad Pro, Arial, Helvetica, sans-serif; letter-spacing:-1px; text-shadow:none; color:#0bb0d0; text-transform:uppercase;}
#experiential_page_container .marketing_details .content{float:left; width:285px; padding-left:152px;}
#experiential_page_container .marketing_details p{float:left; width:100%; font-size:15px; line-height:16px; color:#fff; padding-bottom:15px;}
#experiential_page_container .marketing_details p a{color:#0bb0d0; text-decoration:none;}
#experiential_page_container .marketing_details p a:hover{text-decoration:underline;}
#experiential_page_container .marketing_details .photo img{float: right;}

experiential page link

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You should make sure that the width of your internal elements isn’t greater than the width of the container OR the sum of the width of your text elements plus the image container’s width isn’t greater than the width of their container:

    i.e.:

    #experiential_page_container{float:left; width:100%; padding-top:235px;}
#experiential_page_container .marketing_details{float:left; width:100%; padding-left:12px;}
#experiential_page_container .marketing_details .photo{float:right; width:45%; height: 100%;}
#experiential_page_container .marketing_details h1{float:left; width:53%;font:52px/64px Myriad Pro, Arial, Helvetica, sans-serif; letter-spacing:-2px; color:#fff;text-shadow:0 0 25px #000; padding-bottom:16px;}
#experiential_page_container .marketing_details h1 span{float:left; width:430px; padding-left:80px;font:21px/23px Myriad Pro, Arial, Helvetica, sans-serif; letter-spacing:-1px; text-shadow:none; color:#0bb0d0; text-transform:uppercase;}
#experiential_page_container .marketing_details .content{float:left; width:285px; }
#experiential_page_container .marketing_details p{float:left; width:100%; font-size:15px; line-height:16px; color:#fff; padding-bottom:15px;}
#experiential_page_container .marketing_details p a{color:#0bb0d0; text-decoration:none;}
#experiential_page_container .marketing_details p a:hover{text-decoration:underline;}
#experiential_page_container .marketing_details .photo img{float: right;}

    In the code above, I removed all unnecessary padding, gave the container the correct width. Please revise the code above to understand what really happened.

    A good example can be found below:

    http://jsfiddle.net/N5mxn/

    • 0