CODEWITHSUNDEEP
htmlcss
carriot share
carriot share

Reputation: 47

HTML CSS element postitioning to one side

I am creating a food-based website and i want the twitter feed to be on the right hand side, but stretched to the length of the site.

HTML

<div id="left">
<p style="font-family:Oswald; color:white; font-size:50">Welcome to fish and dips!</p>
<p style="font-family:Lato;font-size:20;color:white;">sample text</p>
</div>

<div id="right">
<a class="twitter-timeline" data-dnt="true" href="https://twitter.com/FishandDips" data-widget-id="625342290215763968">Tweets by @FishandDips</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
</div> <!-- this is just a custom twitter feed generated by twitter -->

CSS

.left {
float: left;
}

.right {
float: right;
}

What am i doing wrong?

Upvotes: 1

Views: 56

Answers (3)

hemnath mouli
hemnath mouli

Reputation: 2755

.left {
float: left;
}

.right {
float: right;
}

CSS selector for Class id "." not "#"

Upvotes: 0

Muhammad Nasir
Muhammad Nasir

Reputation: 2204

If you did not define width for your divs it will take width of container and float and right will have not effect when there is big data .They will occupy full width,From left to right and from right to left

#left {
float: left;
width://
}

#right {
float: right;
width://
}

Upvotes: 0

MazzCris
MazzCris

Reputation: 1840

You have id attributes in your div elements but you are selecting by class in your css.

According to your needs, you can change your html to something like this: 

<div class="left"></div>
<div class="right"></div>

or your css to something like this:

#left {
    float: left;
}

#right {
    float: right;
}

Take a look here: css selectors

Upvotes: 2

Related Questions