Reputation: 45
I need to position the word "Share" within the blue box on the right side, see below:
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
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
Reputation: 125651
You could simply switch the order of the share div and the textMenu list.
<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