Jump to content


Check out our Community Blogs

Register and join over 40,000 other developers!


Recent Status Updates

View All Updates

Photo
- - - - -

How to set Right side

html css

Best Answer Vaielab, 06 July 2014 - 06:46 PM

There are multiple way to do so

 

You could put a big left margin / padding to your "grab our feeds" link

 

You could put all your right side inside a div and put it position absolute

 

Or you could put it into a div with a float right

 

Maybe there is something to do with flexbox (css3, I did not used it yet, so can't really tell)

 

 

If you setup a jsfiddle / codepen / other web preview I could have some try and give you a more precise answer

Go to the full post


This topic has been archived. This means that you cannot reply to this topic.
2 replies to this topic

#1 B13

B13

    CC Regular

  • Member
  • PipPipPip
  • 28 posts

Posted 06 July 2014 - 04:28 PM

How can I set "Grab Our feeds  with icon side by side with search box like the Attachment picture ? please help 
 

 

HTML CODE: 

<body><section id="top">
<div class="container">
<p class="list fl">
<a href="">Home</a>
<a href="">About Us</a>
<a href="">Services</a>
<a href="">Portfolio</a>
<a href="">Blog</a>
<a href="">Contact</a>
</p>
<p class="fr">
<a href="">Grab Our feeds</a>
<a href="#" class="icon-feed fr">Feed</a>
<input type="text" class="search" value="Search ..." <button class="go left rounded"><span></span></button> 
    </p>
<p class="clf"></p>
</div>
</section>
</body>

CSS CODE: 

 

.container{
     width: 1020px;
     margin: 0 auto;
}


.fl{
    float: left;
}


.fr{
    float: right;
}
.clf{
    clear: both;
}




#top{
   height: 70px;
   background-color: #1a1e27;
   
}
#top p{
    color: #fff;
    padding: 26px 0;
}


#top p a{
    color: #fff;
    text-decoration: none;
    margin: 0 4px 0 0;
}
a.icon-feed{
    width:23px ;
    height:25px ;
    background:url(imgs/icon.png) no-repeat 0 0;
    padding: 0 10px 0px 0px;
}

 

Attached Thumbnails

  • brilliante.jpg

:confused:


#2 Vaielab

Vaielab

    Programming God

  • Expert Member
  • PipPipPipPipPipPipPip
  • 1382 posts

Posted 06 July 2014 - 06:46 PM   Best Answer

There are multiple way to do so

 

You could put a big left margin / padding to your "grab our feeds" link

 

You could put all your right side inside a div and put it position absolute

 

Or you could put it into a div with a float right

 

Maybe there is something to do with flexbox (css3, I did not used it yet, so can't really tell)

 

 

If you setup a jsfiddle / codepen / other web preview I could have some try and give you a more precise answer


You can now stalk me on linkedin: http://ca.linkedin.c...elle/24/b44/88/ !


#3 B13

B13

    CC Regular

  • Member
  • PipPipPip
  • 28 posts

Posted 06 July 2014 - 08:01 PM

Such Online Editor provides different answers


:confused:





Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download