CODEWITHSUNDEEP
htmlcss
Iikinz
Iikinz

Reputation: 45

How do I position text within a box with css?

I need to position the word "Share" within the blue box on the right side, see below: enter image description here

I have a div that contains the word Share within another div with an ul: 

<div id="menuBox">
  <ul class="textMenu">
     <li>Web Design / HTML</li>
     <li>Design Basics</li>
     <li>Learn HTML CSS XML</li>
     <li>Careers</li>
  </ul>
  <div id="share">
     Share
  </div>

And this is the css:

#menuBox
{
    width:65%;
    height:2%;
    margin-left:auto;
    margin-right:auto;
    position: relative;
    margin-top:100px;
    clear: both;
    background: #4789c1;
    background-image: -webkit-linear-gradient(top, #4789c1, #286294);
    background-image: -moz-linear-gradient(top, #4789c1, #286294);
    background-image: -ms-linear-gradient(top, #4789c1, #286294);
    background-image: -o-linear-gradient(top, #4789c1, #286294);
    background-image: linear-gradient(to bottom, #4789c1, #286294);
}
.textMenu
{
    color:white;
    list-style-type: none;
    margin-bottom:0px;
}
li
{
    display:inline;
    padding-right:10px;
    padding-left:10px;
    border-right: 2px solid white;
    text-align:center;
}
 #bigBox
 {
    width:65%;
    height:80%;
    margin-left:auto;
    margin-right:auto;
    margin-top:100px;
    position: relative;
    background-color:white;
    box-shadow:0px 3px 3px 3px #C0C0C0;
 }
#share
{
    float:right;
    position:relative;
}

I believe that this issue is because there is no enough space on the blue box for the word "Share" but I do not know how to fix this, I tried adding marging-left and marging-right, but that is not working. I also tried paddings and position:absolute; but that doesn't fix the issue. Any help? Thanks

Upvotes: 1

Views: 153

Answers (2)

JunM
JunM

Reputation: 7160

Demo: http://jsfiddle.net/LPtTn/1/

You can use table and table-cell:

HTML:

 <div id="wrapper">    
<div id="menuBox">
  <ul class="textMenu">
     <li>Web Design / HTML</li>
     <li>Design Basics</li>
     <li>Learn HTML CSS XML</li>
     <li>Careers</li>
  </ul>
</div>    

<div id="share">
     Share
</div>    
</div>

CSS:

#menuBox
{
    width:80%;
    background: #4789c1;
    background-image: -webkit-linear-gradient(top, #4789c1, #286294);
    background-image: -moz-linear-gradient(top, #4789c1, #286294);
    background-image: -ms-linear-gradient(top, #4789c1, #286294);
    background-image: -o-linear-gradient(top, #4789c1, #286294);
    background-image: linear-gradient(to bottom, #4789c1, #286294);
    display: table-cell;    

}

#share{
    width:20%;
    background: #4789c1;
    background-image: -webkit-linear-gradient(top, #4789c1, #286294);
    background-image: -moz-linear-gradient(top, #4789c1, #286294);
    background-image: -ms-linear-gradient(top, #4789c1, #286294);
    background-image: -o-linear-gradient(top, #4789c1, #286294);
    background-image: linear-gradient(to bottom, #4789c1, #286294);
    display: table-cell;
    text-align:center;
}


.textMenu
{
    color:white;
    list-style-type: none;
    margin-bottom:0px;
}
li
{
display:inline;
    padding-right:10px;
    padding-left:10px;
    border-right: 2px solid white;
    text-align:center;
}

#wrapper{
    display: table;
}

Upvotes: 1

Danield
Danield

Reputation: 125651

You could simply switch the order of the share div and the textMenu list.

FIDDLE

<div id="menuBox">
    <div id="share">Share</div>
    <ul class="textMenu">
        <li>Web Design / HTML</li>
        <li>Design Basics</li>
        <li>Learn HTML CSS XML</li>
        <li>Careers</li>
    </ul>
</div>

The reason for this is that the list already takes up 100% width, so if I add the right-floated share div afterwards - it gets knocked down under the menu.

Upvotes: 1

Related Questions