How to control the HTML area to the right?


Tags: html,css,html5,css3

Problem :

I want to add options to select language somewhere close to the facebook like button but I can't fit it in: enter image description here

The HTML code is

<div style="margin-top:3px;margin-left:15px;float:right;">         
  <iframe src="http://www.facebook.com/plugins/like.php?href=http://{{request.host}}&layout=button_count"
        scrolling="no" frameborder="0"
        style="border:none; width:450px; height:80px"></iframe>
</div>

<div class="links">
    <a href="/login/" target="_blank" title="Log in distributor">&nbsp;DISTRIBUTOR LOG IN</a>&nbsp;|&nbsp;<a href="/register/" target="_blank" title="Log in distributor">JOIN</a>    
    <strong class="title">FOLLOW US</strong>
    <ul>
       <li><a href="http://www.facebook.com/bnano" target="_blank" title="Come join us on Facebook!"><img class="png" src="/welcome/static/images/facebook.png" alt="Come join us on Facebook!" /></a></li>
       <li><a href="http://twitter.com/bnano" target="_blank" title="Follow us on Twitter!"><img class="png" src="/welcome/static/images/twitter.png" alt="Follow us on Twitter!" /></a></li>
    </ul> 
</div>

My CSS file is

    html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, caption, hr, button {margin:0; padding:0; border:0; outline:0; font-size:100%; vertical-align: baseline; background:none;}
table, tbody, tfoot, thead, tr, th, td {padding:4px;vertical-align:top;}
ol, ul {list-style:none;}
h1, h2, h3, h4, h5, h6, li {line-height:100%;}
blockquote, q {quotes:none;}
q:before,
q:after {content: '';}
table {border-collapse:collapse; border-spacing:0;}
input, textarea, select{
    font:11px Arial, Helvetica, sans-serif;
    vertical-align:middle;
    margin:0;
    padding:0;
}
form, fieldset{border-style:none;}
html {height:100%;}
body {
    min-width:1004px;
    color:#404344;
    height:100%;
    font:13px/16px "Lucida Sans Unicode", "Lucida Grande", sans-serif;
    background:#fff;
    margin: 0 1px 1px;
}
img{border-style:none;}
a{
    text-decoration:none;
    color:#000000;
}
a:focus {outline:none;}
a:hover{text-decoration:underline;}
/* wrapper */
#wrapper{
    width:100%;
    min-height:100%;
}
* html #wrapper {height:100%;}
/* header */
#header {
    width:100%;
    background:#1596c3 url(http://bnano-www.appspot.com/welcome/static/images/bg-header.png) repeat-x;
}
#header:after {
    display:block;
    clear:both;
    content:"";
}
/* header-area */
.header-area {
    margin:0 auto;
    width:948px;
    padding:0 23px;
}
/* top-panel*/
.top-panel {
    overflow:hidden;
    height:36px;
    padding:6px 0 0 4px;
    margin:0 0 19px;
    position:relative;
    z-index:9999999 !important;
}
/* search-form */
.search-form {
    float:right;
    margin:0 10px 0 15px;
}
.search-form form {float:left;}
.top-panel .text {
    float:left;
    padding:6px 13px 7px 13px;
    margin:0 5px 0 0;
    background:url(http://bnano-www.appspot.com/welcome/static/images/bg-text.gif) no-repeat;
}
.top-panel .text input {
    font:13px "Lucida Sans Unicode", "Lucida Grande", sans-serif;
    color:#8cc0d3;
    float:left;
    width:157px;
    margin:0;
    padding:0 -2px 0 0;
    border:0;
    background:none;
}
.top-panel .text input:focus {outline:none;}
.search-form .search {
    float:left;
    background:url(http://bnano-www.appspot.com/welcome/static/images/btn-search.gif) no-repeat;
    width:26px;
    height:27px;
    overflow:hidden;
    text-indent:-9999px;
    line-height:0;
    font-size:0;
    cursor:pointer;
    border:0;
}
/* email-form */
.email-form {
    float:left;
    width:214px;
}
.email-form form {float:left;}
.email-form .go {
    float:left;
    background:url(http://bnano-www.appspot.com/welcome/static/images/btn-go.gif) no-repeat;
    width:26px;
    height:27px;
    overflow:hidden;
    text-indent:-9999px;
    line-height:0;
    font-size:0;
    cursor:pointer;
    border:0;
}
/* links */
.top-panel .links {
    float:right;
    padding:9px 0 0;
    width:400px;
}
.top-panel .links .title {
    float:left;
    color:#fdfdfd;
    font-weight:normal;
    font-size:13px;
    text-transform:uppercase;
    padding-top:1px;
}
.top-panel .links .title .cufon {
    float:left;
    margin:0 !important;
}
.top-panel .links ul {
    float:left;
    position:relative;
    margin:-5px 0 0;
}
.top-panel .links li {
    float:left;
    padding:0 0 0 9px;
}
.top-panel .links li img {display:block;}
/* header-info */
.header-info {
    padding:0 0 95px 17px;
    position:relative;
    z-index:99999 !important;
}
/* logo */
.logo {
    float:left;
    background:url(/welcome/static/images/logo-opaque.png) no-repeat;
    width:220px;
    height:176px;
    text-indent:-9999px;
    margin:0 0 0 -15px;
    position:relative;
    z-index: 999999 !important;
}
.logo a {
    display:block;
    height:100%;
}
/* nav */
#nav {
    float:right;
    padding:20px 0 0;
}
#nav li {
    float:left;
    margin:0 3px 0 3px;
    font-size:16px;
    line-height:17px;
}
#nav li a {
    float:left;
    padding:0 5px 0 0;
    color:#a9cfdd;
    cursor:pointer;
}
#nav li a span {
    float:left;
    padding:5px 6px 4px 11px;
}
#nav li.active a,
#nav li a:hover {
    text-decoration:none;
    color:#f6f6f6;
    background:url(http://bnano-www.appspot.com/welcome/static/images/btn-active.gif) no-repeat 100% -23px;
}
#nav li.active a span,
#nav li a:hover span {
    background:url(http://bnano-www.appspot.com/welcome/static/images/btn-active.gif) no-repeat;
}
#nav li a .cufon {
    float:left;
    margin:0 !important;
}
/* info-area */
#header .info-area {
    height:398px;
    width:900px;
    background:none !important;
    padding:15px 2px 0 13px;
    margin-top:-148px;
    margin-left:25px;
}

#header .info-area .txt {
    float:left;
    color:#f6f8f9;
    font-size:19px;
    margin-top:100px;
}
#header .info-area .txt .cufon {
    float:left;
    margin:0 !important;
}
#header .info-area .txt .text .cufon {margin-top:1px !important;}
#header .info-area .title {
    color:#a9cfdd;
    font-size:48px;
    position:absolute;
    line-height:51px;
    padding-top:55px;
    width:550px;
}
#header .info-area .title span {
    font-size:35px;
    line-height:36px;
    display:block;
    overflow:hidden;
    width:100%;
    height:32px !important;
    padding-top:1px;
}
#header .info-area .title em {
    font-style:normal;
    display:block;
    overflow:hidden;
    width:100%;
    height:53px !important;
}
#header .info-area .desc {
    font-family: "Arial Narrow", sans-serif;
    line-height:20px;
    margin: 8px 0 25px 3px;
    font-size:19px;
    letter-spacing:2px;
    position:absolute;
    z-index:9999 !important;
    padding-top:130px;
    width:550px;
}
#header .info-area .txt .text {
    display:block;
    overflow:hidden;
    height:1%;
    padding:0 0 5px;
}
#header .info-area .txt .text1 {
    background:url(http://bnano-www.appspot.com/welcome/static/images/ico03.gif) no-repeat 2px 9px;
    padding:26px 0 27px 114px;
}
#header .info-area .img {
    float:right;
    position:relative;
    margin-left:500px;
    margin-top:-100px;
}
#header .info-area .more {
    overflow:hidden;
    height:25px;
    letter-spacing:1px !important;
    margin-top:23px;
    margin-left:-3px;
}
#header .info-area .more a {
    color:#f6f8f9;
    float:left;
    background:url(http://bnano-www.appspot.com/welcome/static/images/bullet05.gif) no-repeat 5px 3px;
    padding:0 0 0 19px;
    font-size:18px;
}
#header .info-area .more a span {
    float:left;
    margin-left:-2px;
    padding-bottom:0;
}
#header .info-area .more a:hover {text-decoration:none;}
#header .info-area .more a:hover span {
    border-bottom:1px solid #f6f8f9;
    padding:0;
}
/* main */
#main {
    overflow:hidden;
    width:100%;
    padding:58px 0 122px;
    background:url(http://bnano-www.appspot.com/welcome/static/images/bg-main-area.gif) repeat-x;
}
/* onecolumn */
#onecolumn {
    margin:0 auto;
    overflow:hidden;
    width:1004px;
    position:relative;
}
#onecolumn ul {
    margin:10px 0 10px 25px;
}
#onecolumn li {
    overflow:hidden;
    height:1%;
    vertical-align:top;
    padding:0 0 12px 15px;
    line-height:16px;
    background:url(http://bnano-www.appspot.com/welcome/static/images/bullet03.gif) no-repeat 2px 6px;
}
#onecolumn  h2 {
    color:#062f3d;
    font-size:25px;
    line-height:26px;
    font-weight:normal;
    margin:0 0 8px 0;

}
#onecolumn  h2 strong {
    color:#138db7;
    font-weight:bold;
    display:block;
    overflow:hidden;
    width:100%;
}
#onecolumn  h2 span {
    display:block;
    overflow:hidden;
    width:100%;
    position:relative;
    padding-bottom:15px;
}
#onecolumn  h2 .cufon {
    float:left;
    margin:0 !important;
}
#onecolumn  h3 {
    color:#676a6b;
    font-size:25px;
    line-height:26px;
    font-weight:normal;
    margin:0 0 10px;
}
#onecolumn  h3 strong {
    color:#138db7;
    font-weight:bold;
    display:block;
    overflow:hidden;
    width:100%;
}
#onecolumn  h3 span {
    display:block;
    overflow:hidden;
    width:100%;
    position:relative;
    margin:-3px 0 0;
}
#onecolumn  h3 .cufon {
    float:left;
    margin:0 !important;
}
#onecolumn .content {
    padding:0 48px 10px 48px;
}
#onecolumn content p {margin:0 0 16px;}
/* twocolumns */
#twocolumns {
    margin:0 auto;
    overflow:hidden;
    width:1004px;
    position:relative;
}
#twocolumns h2 {
    color:#062f3d;
    font-size:25px;
    line-height:26px;
    font-weight:normal;
    margin:0 0 14px 0;
}
#twocolumns h2 strong {
    color:#138db7;
    font-weight:bold;
    display:block;
    overflow:hidden;
    width:100%;
}
#twocolumns h2 span {
    display:block;
    overflow:hidden;
    width:100%;
    position:relative;
    margin:-3px 0 0;
    font-size:30px;
}
#twocolumns h2 .cufon {
    float:left;
    margin:0 !important;
}
#twocolumns h3 {
    color:#062f3d;
    font-size:25px;
    line-height:26px;
    font-weight:normal;
    margin:0 0 10px;
}
#twocolumns h3 strong {
    color:#138db7;
    font-weight:bold;
    display:block;
    overflow:hidden;
    width:100%;
}
#twocolumns h3 span {
    display:block;
    overflow:hidden;
    width:100%;
    position:relative;
    margin:-3px 0 0;
    font-size:26px;
}
#twocolumns h3 .cufon {
    float:left;
    margin:0 !important;
}
#twocolumns h4 strong {
    color:#138db7;
    font-weight:bold;
    display:block;
    overflow:hidden;
    width:100%;
    font-size:16px;
    margin: 10px 0 17px 2px;
}
/* content */
#content {
    position:relative;
    float:left;
    width:596px;
    padding:0 20px 10px 48px;
    z-index: 99999 !important;
}
#content p {
    margin:0 2px 16px;
    line-height:18px;
    font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
    font-size:13px;
}
#content p img {
    padding:10px;
}
#content .more {
    overflow:hidden;
    height:1%;
    padding:0 0 16px 4px;
    font-size:14px;
}
#content .more a {
    float:left;
    background:url(http://bnano-www.appspot.com/welcome/static/images/bullet01.gif) no-repeat 0 55%;
    padding:0 0 0 13px;
    color:#404344;
}
#content .more a:hover {
    color:#138db7;
}
/* video-block */
#content .video-block {
    width:616px;
    margin:0 -20px 0 -19px;
    position:relative;
    padding:0 4px 0 15px;
    background:#d4dadb url(http://bnano-www.appspot.com/welcome/static/images/bg-video-block.gif) repeat-x;
}
#content .video-block:after {
    display:block;
    clear:both;
    content:"";
}
#content .video-block .heading {
    background:url(http://bnano-www.appspot.com/welcome/static/images/bg-heading.gif) no-repeat;
    width:176px;
    height:51px;
    position:relative;
    margin:0 0 4px -7px;
    padding:25px 0 0 15px;
}
#content .video-block .info-col {
    float:left;
    width:271px;
    padding:0 0 0 7px;
    margin:-6px 0 0;
    position:relative;
}
#content .video-block h3 {
    overflow:hidden;
    width:100%;
    padding:3px 0 0;
    margin:0;
}
#twocolumns .video-block strong {
    width:auto;
    float:left;
    display:inline;
    font-size:18px;
    color:#fff;
}
#twocolumns .video-block span{
    width:auto;
    float:left;
    display:inline;
    font-size:25px;
    color:#fff;
}
/* list */
#content .video-block .list {height:1%;}
#content .video-block .list li {
    overflow:hidden;
    height:1%;
    vertical-align:top;
    padding:0 0 13px 13px;
    line-height:14px;
    background:url(http://bnano-www.appspot.com/welcome/static/images/bullet02.gif) no-repeat 1px 4px;
}
#content .video-block .list li h4 {
    font-size:13px;
    line-height:15px;
    font-weight:normal;
    color:#967723;
}
#content .video-block .list li h4 a {color:#967723;}
#content .video-block .list li p {margin:0;}
#content .video-block .video {
    float:right;
    margin:0 0 -8px;
    padding:30px 0 0;
    position:relative;
}
#content .video-block .video img {display:block;}
#content blockquote {
  font: 14px/22px normal helvetica, sans-serif;
  margin-top: 10px;
  margin-bottom: 10px;
  margin-left: 50px;
  padding-left: 15px;
  border-left: 3px solid #ccc;
}
#content blockquote p {margin:0;}
#content blockquote cite {font-style:normal;}
/* blocks */
#content .blocks {
    overflow:hidden;
    width:582px;
}
#content .blocks h3 {
    font-size:14px;
    line-height:18px;
    font-weight:normal;
    color:#4499b7;
    margin:0 0 13px;
}
#content .block-holder {
    width:590px;
    overflow:hidden;
    margin:0 -8px 5px 0;
}
#content .blocks .block {
    width:290px;
    margin:0 4px 0 0;
    padding:18px 0 10px;
    float:left;
    color:#ba9d50;
    font-size:11px;
    line-height:13px;
    background:#dcddde;
}
#content .blocks .block .img {
    overflow:hidden;
    width:100%;
    text-align:center;
    margin:0 0 18px;
}
#content .blocks .block .img img {vertical-align:top;}
#content .blocks .block p {
    text-align:center;
    margin:0;
}
#content .blocks .block p a {color:#ba9d50;}
#content ul {
    margin:10px 0 10px 25px;
}
#content li {
    overflow:hidden;
    height:1%;
    vertical-align:top;
    padding:0 0 12px 15px;
    line-height:16px;
    background:url(http://bnano-www.appspot.com/welcome/static/images/bullet03.gif) no-repeat 2px 6px;
}
/* sidebar */
#sidebar {
    float:right;
    position:relative;
    width:315px;
    padding:0 3px 0 10px;
    overflow:hidden;
    z-index: 99999 !important;
}
#sidebar p {
    margin-left:2px;
}
/* news-list */
#sidebar .news-list {
    width:300px;
    padding:0 15px 19px 0;
}
#sidebar .news-list li {
    overflow:hidden;
    height:1%;
    vertical-align:top;
    padding:0 0 12px 15px;
    line-height:14px;
    background:url(http://bnano-www.appspot.com/welcome/static/images/bullet03.gif) no-repeat 2px 6px;
}
#sidebar .news-list li h4 {
    font-size:13px;
    line-height:15px;
    font-weight:normal;
    margin:0 0 1px;
}
/* news-list1 */
#sidebar .news-list1 {
    padding-right:0;
    padding-bottom:14px;
    width:300px;
}
#sidebar .news-list1 li {
    background-position:3px 6px;
    padding-left:17px;
}
#sidebar .news-list1 h4 {
    color:#967723;
    position:relative;
    word-spacing:-1px;
}
#sidebar .news-list1 h4 a {color:#967723;}
/* #sidebar .news-list1 h4 a {color:#967723;} */
/* info-list */
#sidebar .info-list {
    width:269px;
    padding:1px 0 0;
}
#sidebar .info-list li {
    overflow:hidden;
    height:1%;
    font-size:25px;
    line-height:27px;
    margin:0 0 2px;
    vertical-align:top;
    background:url(http://bnano-www.appspot.com/welcome/static/images/bg-info-list.gif) no-repeat;
}
#sidebar .info-list li a {
    float:left;
    padding:9px 10px 4px 41px;
    color:#138db7;
    background:url(http://bnano-www.appspot.com/welcome/static/images/bullet04.gif) no-repeat 13px 50%;
}
#sidebar .info-list li a .cufon {
    float:left;
    margin:0 !important;
}
#sidebar .info-list li a:hover {text-decoration:none;}
#sidebar .info-list li a span {
    float:left;
    margin:0 2px 0 0;
}
#sidebar .info-list li a strong {float:left;}
#sidebar .view {
    display:block;
    background:url(http://bnano-www.appspot.com/assets/files/img/btn/online-store.png) no-repeat;
    color:#fff;
    font-size:30px;
    width:191px;
    height:75px;
    margin:0 0 0 -8px;
    padding:22px 115px 0 18px;
}
#sidebar .view span {
    font-size:30px;
    overflow:hidden;
    width:100%;
    display:block;
}
#sidebar .view strong {
    overflow:hidden;
    width:100%;
    display:block;
}
#sidebar .view .cufon {
    float:left;
    margin:0 !important;
}
#sidebar .view:hover {text-decoration:none;}
/* footer */
#footer {
    height:206px;
    position:relative;
    overflow:hidden;
    margin:-106px 0 0;
    font-size:11px;
    line-height:14px;
    color:#9ddbf1;
    background:#1494c1 url(http://bnano-www.appspot.com/welcome/static/images/bg-footer.gif) repeat-x;
}
/* footer-area */
.footer-area {
    margin:0 auto;
    width:948px;
    padding:52px 1px 0;
}
.footer-area p a {color:#000000;}
#footer .copyright {
    float:left;
    width:390px;
    margin:5px 30px 0 0;
}
#footer .copyright p {text-align:right;}
#footer .logo1 {
    float:left;
    background:url(http://bnano-www.appspot.com/welcome/static/images/logo01.png) no-repeat;
    width:130px;
    height:102px;
    overflow:hidden;
    text-indent:-9999px;
    position:relative;
    margin:-52px 30px 0 0;
}
#footer .logo1 a {
    display:block;
    height:100%;
}
/* info */
#footer .info {
    float:left;
    width:350px;
    position:relative;
    margin:-9px 0 0;
}
#sidebar form { 
width : 295px;
height : auto; 
text-align : left; 
margin-top : 10px;
margin-bottom:25px;
border: none;
}

#sidebar input { 
width : 240px; 
height:20px;
background : url(http://bnano-www.appspot.com/welcome/static/images/bg-input.png) no-repeat scroll 0% 0%;
color : #666; 
font-size : 14px; 
margin-bottom : 6px; 
padding : 10px 10px 8px 10px;
border:0;
}

#sidebar textarea { 
width : 265px; 
height : 105px;
background : url(http://bnano-www.appspot.com/welcome/static/images/textarea-b.png) no-repeat scroll 0% 0%; 
padding : 10px 30px 10px 10px; 
font-size : 14px; 
color : #666; 
margin-bottom : 1px;
border:0;
}

#sidebar .button { 
background : url(http://bnano-www.appspot.com/welcome/static/images/button.png) no-repeat 0% 0%; 
width : 104px; 
height : 30px; 
color : #fff; 
font-size : 13px; 
cursor:pointer;
margin-top:10px;
margin-left:180px;
padding : 5px 0 5px 0;
border:0;
font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
}

#sidebar .invalidValue { 
color:#c21313;
}

The live site is here. Can you tell me how to add an option element close to the Like button where I can choose English or Spanish? When I add an option element the layout collapses since there are too many elements or something.

Thank you



Solution :

enter image description here

This HTML structure

<div class="top-panel">
<div style="margin-top: 3px; margin-left: 15px; width: 89px; float: left;"> <-- Contains FB
<div class="links"> <-- Contains the Follow us links
</div>

You need to switch the order and set a width to the items so that they don't free float. Currently, your FB container is floating right and taking up all the remaining space

<div class="top-panel">
<div class="links"> <-- Floats left with set width
<div class="fbstuff"> <-- Floats left with set width
<div class="langstuff"> <-- Your new lang select area
</div>

Once you put the items in the correct order and float them left, it should fix your problem


    CSS Howto..

    How can I delete this “a” space under the images using CSS?

    How to reduce my code in both jQuery and CSS

    CSS - How to make IE7 respect min-width

    How to add a shadow for underline (bottom border) in css

    How to change the width of dynamically generated list boxes, based on user input?

    How to apply css to iframe content? [closed]

    How can you create a cross browser css menu that doesnt require you to provide a style for EVERY LEVEL of the menu

    How to position an inner - inner tag at different position?

    CSS - How to auto adjust DIV height according to next sibling height?

    How to change a button data-icon size

    How do I get IE7 to print this properly with columns hidden by CSS?
    What I ended up doing is simply specifying the widths on the cells themselves and not using the <colgroup> anymore at all. Not ideal in my mind, so I'll leave...
    Read more

    How to make width of nested CSS elements all the same?

    How to make my buttons responsive?

    How to manage textarea right side overflow in css?

    How to set background color to the column using CSS?

    CSS: How to get rid of scroll (except when there's additional content)?

    How can I use CSS transitions to animate a responsive layout's vertical orientation?

    How to fix hover on transparent photo

    Show container only if text inside it

    How can I reduce the amount of vertical space between lines of text using CSS?

    How to make image clickable if -1 z-index is given to create box-shadow?

    How to draw outside borders only in thead

    How to stack text with pure CSS?

    How to click CSS with a space using Selenium Webdriver

    How to make this Header/Content/Footer layout using CSS?

    How to refer in CSS to all elements that have some attribute?

    How do i make a flexible div with a background in css

    How to disable CSS minifier in Liferay?

    How can I get this css to display correctly in Chrome?

    How to display a portion of an image with CSS?