Need a fresh pair of eyes

May 31, 201214 yr

I could do with some help if anyone is willing. Its late and I am starting to get double double vision.

I am trying to get the twitter app side by side with the main page. I have floated left. I have floated right. and now my mind is floating, trying to see why the twitter app is on top of the page instead of beside it....

here is the link My link

Your help would be appreciated.

Here is the css

#wrapper {
margin-right: auto;
margin-left: auto;
width: 1024px;
height: 695px;
background-image: url(../images/kproductionswebbackgroundpsd1.png);
background-repeat: no-repeat;
float: right;
}
#wrap #clearagain {
clear: both;
}

#wrapper #footer {
color: #0A0A0A;
}

#wrapper #header {
float: right;
height: 200px;
width: 560px;
padding-top: 75px;
text-align: center;
font-family: 'Oxygen', sans-serif;
font-weight: bolder;

}


@font-face {
font-family: AcclaimExtrabold;
src: url('AcclaimExtralight.ttf');
}

@font-face {
font-family: AcclaimExtrabold;
src: url('AcclaimExtrabold.ttf');
}

#wrapper #header h5 {
color: #F00;
text-align: center;
font-size: 24px;

}
#wrapper #header p {
text-align: center;
}

#wrapper #logo {
float: left;
}
#wrapper #logo a img {
padding-left: 60px;
border: none;
}

#wrapper #portfoliobutton {
clear: right;
padding-top: 180px;
}
#wrapper #captureimg {
clear: both;
padding-top: 45px;
padding-left: 80px;
float: left;
}
#wrapper #content1 {
float: right;
width: 400px;
height: 400px;
}
#wrapper #content1 p a {
color: #00E100;
font-family: AcclaimExtrabold;
}

#wrapper #content1 {
color: #FFF;
}
#wrapper #content1 h1 {
font-size: xx-large;
padding-top: 30px;
padding-left: 60px;
}
#wrap #kontact {
float: left;
}

#wrapper #content1 h2 {
font-size: 16px;
font-family: AcclaimExtralight;
}
#wrapper #content1 p {
padding-right: 80px;
font-family: AcclaimExtralight;
text-align: justify;
}
#wrapper #content1 #heading2 {
padding-right: 40px;
}


#wrapper #menu {
float: right;
width: 540px;
}
#wrapper #menu {
}
#wrapper #menu #home a #Home {
float: left;
padding-top: 5px;
-webkit-transition: all 150s ease-in;
}
#wrapper #menu #portfoliobtn a #Image4 {
float: left;
padding-top: 6px;
padding-left: 20px;
}
#wrapper #menu #packages a #packages {
float: left;
padding-top: 2px;
padding-left: 10px;
}
#wrapper #menu #buywebsite a #buy website {
float: left;
padding-top: 16px;
}
#wrapper #menu #buywebsite a #buywebsite {
float: right;
padding-right: 55px;
padding-top: 5px;
}


ul
{
list-style-type: none;
}
#wrapper2 {
margin-right: auto;
margin-left: auto;
width: 1024px;
height: 695px;
background-image: url(../images/bg2.gif);
background-repeat: no-repeat;
}
#wrapper2 #menu #id {
}

#wrapper2 #logo {
float: left;
}
#wrapper2 #logo a img {
padding-left: 60px;
border: none;

}

#wrapper2 #portfoliobutton {
padding-top: 180px;
clear: right;
}
#wrapper2 #content1 h1 a {
font-size: 24px;
color: #FFF;
}

#wrapper #contactbutton {
clear: right;
float: right;
padding-right: 450px;
padding-top: 100px;
}

#wrapper2 #captureimg {
clear: both;
padding-top: 45px;
padding-left: 80px;
float: left;
}
#wrapper2 #content1 {
float: right;
width: 400px;
height: 400px;
font-family: AcclaimExtralight;
}
#wrapper2 #content1 {
color: #FFF;
}
#wrapper2 #content1 h1 {
font-size: xx-large;
padding-top: 30px;
padding-left: 50px;
font-family: AcclaimExtrabold;
}
#wrapper2 #content1 h2 {
font-size: 16px;
padding-left: 30px;
}
#wrapper2 #content1 p {
padding-right: 80px;
}
#wrapper2 #content1 #heading2 {
padding-right: 40px;
}


#wrapper2 #menu {
float: right;
width: 540px;
}
#wrapper2 #menu {
}
#wrapper2 #menu #home a #Home {
float: left;
padding-top: 5px;
}
#wrapper2 #menu #portfoliobtn a #Image4 {
float: left;
padding-top: 6px;
padding-left: 20px;
}
#wrapper2 #menu #packages a #packages {
float: left;
padding-top: 2px;
padding-left: 10px;
}
#wrapper2 #menu #buywebsite a #buy website {
float: left;
padding-top: 16px;
}
#wrapper2 #menu #buywebsite a #buywebsite {
float: right;
padding-right: 55px;
padding-top: 5px;
}








#wrapper3 {
margin-right: auto;
margin-left: auto;
width: 1024px;
height: 695px;
background-image: url(../images/bgnumba3.gif);
background-repeat: no-repeat;
}
#wrapper3 #captureimg2 {
color: #FFF;
padding-left: 130px;
float: left;
width: 275px;
}
#wrapper3 #right {
float: right;
width: 330px;
color: #FFF;
font-family: AcclaimExtralight;
}
#wrapper3 #clear {
clear: both;
}
#wrapper3 #right h2 {
color: #FF0;
}


#wrapper3 #captureimg2 h1 {
padding-left: 350px;
}
#wrapper3 #captureimg2 h2 {
font-family: AcclaimExtralight;
color: #F00;
}
#wrapper3 #middle {
float: left;
width: 260px;
color: #FFF;
padding-left: 15px;
font-family: AcclaimExtralight;
}
#wrapper3 #middle h2 {
color: #CF6;

}


#wrapper3 #logo {
float: left;
}
#wrapper3 #logo a img {
padding-left: 60px;
border: none;

}

#wrapper3 #portfoliobutton {
clear: right;
padding-top: 180px;
}
#wrapper3 #captureimg {
clear: both;
padding-top: 85px;
padding-left: 80px;
float: left;

}
#wrapper3 #content1 {
float: right;
width: 400px;
height: 400px;
}
#wrapper3 #content1 p a {
color: #F00;
font-family: AcclaimExtrabold;
}

#wrapper3 #content1 {
color: #FFF;
font-family: AcclaimExtralight;
}
#wrapper3 #content1 h1 {
font-size: xx-large;
padding-top: 30px;
padding-left: 50px;
}
#wrapper3 #content1 h2 {
font-size: 16px;
padding-left: 30px;
padding-top: 30px;
}
#wrapper3 #content1 p {
padding-right: 80px;
}
#wrapper3 #content1 #heading2 {
padding-right: 40px;
}


#wrapper3 #menu {
float: right;
width: 540px;
}
#wrapper3 #menu {
}
#wrapper3 #menu #home a #Home {
float: left;
padding-top: 5px;
}
#wrapper3 #menu #portfoliobtn a #Image4 {
float: left;
padding-top: 6px;
padding-left: 20px;
}
#wrapper3 #menu #packages a #packages {
float: left;
padding-left: 10px;
}
#wrapper3 #down #captureimg2 p {
font-family: AcclaimExtralight;

}
#wrapper3 #down #captureimg2 #money1 p {
font-weight: bolder;
}
#wrapper3 #down #middle #money2 p {
font-weight: bolder;
}
#wrapper3 #down #right #money3 {
font-weight: bolder;
}
#wrapper3 #down {
padding-top: 20px;
}

#wrapper3 #menu #buywebsite a #buy website {
float: left;
padding-top: 16px;
}
#wrapper3 #menu #buywebsite a #buywebsite {
float: right;
padding-right: 55px;
padding-top: 5px;
}
















#wrapper4 {
margin-right: auto;
margin-left: auto;
width: 1024px;
height: 695px;
background-image: url(../images/bgcontact.gif);
background-repeat: no-repeat;
}
#wrapper4 #captureimg {
}

#wrapper4 #logo {
float: left;
}
#wrapper4 #logo a img {
padding-left: 60px;
border: none;
}

#wrapper4 #portfoliobutton {
clear: right;
padding-top: 180px;
}
#wrapper4 #captureimg {
clear: both;
padding-top: 45px;
padding-left: 80px;
float: left;
color: #FFF;
font-family: AcclaimExtralight;
}
#wrapper4 #content1 {
float: right;
width: 400px;
height: 400px;

}
#wrapper4 #captureimg table tr td #form1 p {
color: #FFF;
}

#wrapper4 #content1 p a {
color: #F00;
}

#wrapper4 #content1 {
color: #FFF;
}
#wrapper4 #content1 h1 {
font-size: xx-large;
padding-top: 30px;
padding-left: 50px;
font-family: AcclaimExtrabold;
}
#wrap4 #kontact {
float: left;
}

#wrapper4 #content1 h2 {
font-size: 16px;
padding-left: 30px;
}
#wrapper4 #content1 p {
padding-right: 80px;
font-family: AcclaimExtralight;
}
#wrapper4 #content1 #heading2 {
padding-right: 40px;
}


#wrapper4 #menu {
float: right;
width: 540px;
}
#wrapper4 #menu {
}
#wrapper4 #menu #home a #Home {
float: left;
padding-top: 5px;
}
#wrapper4 #menu #portfoliobtn a #Image4 {
float: left;
padding-top: 6px;
padding-left: 20px;
}
#wrapper4 #menu #packages a #packages {
float: left;
padding-top: 2px;
padding-left: 10px;
}
#wrapper4 #menu #buywebsite a #buy website {
float: left;
padding-top: 16px;
}
#wrapper4 #menu #buywebsite a #buywebsite {
float: right;
padding-right: 55px;
padding-top: 5px;
}
#wrap #twitter {
float: left;
}
#wrap {
width: 1174px;
margin-right: auto;
margin-left: auto;
}

Edited May 31, 201214 yr by Renaissance-Design
Please use the code button or tags to format your code.

May 31, 201214 yr

I'll take a look at it in the morning for you it's 2.30am and I'm starting to fall asleep :/

May 31, 201214 yr

Author

nice one Danai

May 31, 201214 yr

The twitter app is side by side with the main page.

Are you actually trying to get the twitter app to align with the bottom content boxes?

If so, you can do one of 2 things:

first, add margin-top: 245px; to #wrap #twitter,

Or

move the following

<div id="twtr-widget-1" class="twtr-widget twtr-widget-profile"><div style="width: 150px;" class="twtr-doc">            <div class="twtr-hd"><a class="twtr-profile-img-anchor" href="https://twitter.com/intent/user?screen_name=kproductionsweb" target="_blank"><img src="http://a0.twimg.com/profile_images/2245913068/K-LOGO3_normal.jpg" class="twtr-profile-img" alt="profile"></a>                      <h3>K P Web Design</h3>                      <h4><a href="https://twitter.com/intent/user?screen_name=kproductionsweb" target="_blank">kproductionsweb</a></h4>             </div>            <div class="twtr-bd">              <div style="height: auto;" class="twtr-timeline">                <div class="twtr-tweets">                  <div class="twtr-reference-tweet"></div><div id="tweet-id-2" class="twtr-tweet"><div class="twtr-tweet-wrap">         <div class="twtr-avatar">           <div class="twtr-img"><a href="https://twitter.com/intent/user?screen_name=kproductionsweb" target="_blank"><img src="http://a0.twimg.com/profile_images/2245913068/K-LOGO3_normal.jpg" alt="kproductionsweb profile"></a></div>         </div>         <div class="twtr-tweet-text">           <p>             <a class="twtr-user" href="https://twitter.com/intent/user?screen_name=kproductionsweb" target="_blank">kproductionsweb</a> Get an extra web page free when you choose one of our website design packages. just quote "twitter" <a rel="nofollow" urlentities="[object Object]" target="_blank" href="http://t.co/Pu1od9E0">kproductionswebdesign.co.uk/packages.html</a>             <em>            <a href="https://twitter.com/kproductionsweb/status/207141037712474112" time="Mon May 28 16:07:26 +0000 2012" class="twtr-timestamp" target="_blank">2 days ago</a> ·            <a href="https://twitter.com/intent/tweet?in_reply_to=207141037712474112" class="twtr-reply" target="_blank">reply</a> ·             <a href="https://twitter.com/intent/retweet?tweet_id=207141037712474112" class="twtr-rt" target="_blank">retweet</a> ·             <a href="https://twitter.com/intent/favorite?tweet_id=207141037712474112" class="twtr-fav" target="_blank">favorite</a>             </em>           </p>         </div>       </div></div><div id="tweet-id-1" class="twtr-tweet"><div class="twtr-tweet-wrap">         <div class="twtr-avatar">           <div class="twtr-img"><a href="https://twitter.com/intent/user?screen_name=kproductionsweb" target="_blank"><img src="http://a0.twimg.com/profile_images/2245913068/K-LOGO3_normal.jpg" alt="kproductionsweb profile"></a></div>         </div>         <div class="twtr-tweet-text">           <p>             <a class="twtr-user" href="https://twitter.com/intent/user?screen_name=kproductionsweb" target="_blank">kproductionsweb</a> Professional websites in Glasgow. Does your business need a website? Start-up package available. Check out the website for more details.             <em>            <a href="https://twitter.com/kproductionsweb/status/205622501798199296" time="Thu May 24 11:33:19 +0000 2012" class="twtr-timestamp" target="_blank">6 days ago</a> ·            <a href="https://twitter.com/intent/tweet?in_reply_to=205622501798199296" class="twtr-reply" target="_blank">reply</a> ·             <a href="https://twitter.com/intent/retweet?tweet_id=205622501798199296" class="twtr-rt" target="_blank">retweet</a> ·             <a href="https://twitter.com/intent/favorite?tweet_id=205622501798199296" class="twtr-fav" target="_blank">favorite</a>             </em>           </p>         </div>       </div></div>                  <!-- tweets show here -->                </div>              </div>            </div>            <div class="twtr-ft">              <div><a href="https://twitter.com" target="_blank"><img src="//widgets.twimg.com/i/widget-logo.png" alt=""></a>                <span><a href="https://twitter.com/kproductionsweb" style="color:#ffffff" class="twtr-join-conv" target="_blank">Join the conversation</a></span>              </div>            </div>          </div></div>

to inside your wrapper div, then you will just need to remove the h3 tag with the small image.

Need a fresh pair of eyes

Featured Replies

Create an account or sign in to comment

Recently Browsing 0

Member Statistics

Forum Statistics

Join WDF

Account

Navigation

Search

Configure browser push notifications

Chrome (Android)

Chrome (Desktop)

Safari (iOS 16.4+)

Safari (macOS)

Edge (Android)

Edge (Desktop)

Firefox (Android)

Firefox (Desktop)