CODEWITHSUNDEEP
htmlcss
user4520104
user4520104

Reputation:

Stretch a div to the edge of screen

I'm trying to make a menu that stretches to the right edge of browser, with any screen width. Here's what I want to do: https://i.sstatic.net/b3GSe.jpg

I'm using position: absolute; and width: 100%; to make #greenbar to stretch outside the #menu div. But it covers all the menu in width, not only on the right side.

HTML:

<header id="nav">
        <h1><a href="#">Title</a></h1>
        <div id="menu">
            <ul>
                <li class="menu_button"><a>button1</a></li>
                <li class="menu_button"><a>button2</a></li>
                <li class="menu_button"><a>button3</a></li>
                <li class="menu_button"><a>button4</a></li>
                <li id="greenbar"></li>
            </ul>
        </div>        
</header>

CSS:

#menu{
    float: right;
    margin-top: 35px;
}

.menu_button{
    display: block;
    float: left;
    padding: 16px 25px;
    background-color: #39b54a;
    color: #fff;
    border-right: 1px solid #fff;
}

.menu_button:hover{
    background-color: #fff;
    color: #39b54a;
    -webkit-transition: background-color 300ms ease-in-out;
    -moz-transition: background-color 300ms ease-in-out;
    -o-transition: background-color 300ms ease-in-out;
    transition: background-color 300ms ease-in-out;
}

.menu_button a:hover{
}

.menu_button a{
    float: left;
    font-family: "Gotham";
    text-transform: uppercase;
}

#greenbar{
    float: right;
    padding: 24px;
    background-color: #39b54a;
}

Upvotes: 0

Views: 8598

Answers (5)

user4520104
user4520104

Reputation:

All right, I added this to my #menu div :

position: absolute;
right: 0;
width: 50%;

The menu now sticks to the right edge of the screen, then I removed float: right from the #greenbar div.

My menu now takes 50% of the screen, and the greenbar stretches to the edge.

Upvotes: 0

Anakin
Anakin

Reputation: 1291

I'm not sure that this could help you or not, but I think so.

Using table as the wrapper, so you can position it.

HTML:

<header id="nav">
 <table id="menu_table">
  <tr>
   <td class="menu_button">
    <a href="#" class="menu_a">button 1</a>
   </td>
   <td class="menu_button">
    <a href="#" class="menu_a">button 2</a>
   </td>
   <td class="menu_button">
    <a href="#" class="menu_a">button 3</a>
   </td>
   <td class="menu_button">
    <a href="#" class="menu_a">button 4</a>
   </td>
   <td id="greenbar">
    &nbsp;
   </td>
  </tr>
 </table>
</header>

CSS:

#menu_table {
    width: 80%;
    position: absolute;
    left: 20%; //make the table away from edge 20% of SCREEN
}

.menu_button{
    padding: 16px 25px;
    background-color: #39b54a;
    color: #fff;
    border-style: solid;
    border-color: #fff;
    border-width: 0px 1px 0px 0px; /*this will add space between button*/
    width: 20%; //width is 20% of table's width
    }

.menu_button:hover{
    background-color: #fff;
    color: #39b54a;
    -webkit-transition: background-color 300ms ease-in-out;
    -moz-transition: background-color 300ms ease-in-out;
    -o-transition: background-color 300ms ease-in-out;
    transition: background-color 300ms ease-in-out;
}

.menu_a {
    font-family: "Gotham";
    text-transform: uppercase;
}

#greenbar{
    width: 20%;
    padding: 24px;
    background-color: #39b54a;
    margin: 0px;
}

I'm new to coding. Please apologise if something went wrong.

Upvotes: 0

user3781632
user3781632

Reputation: 1633

I think you're trying to add a background color to your navbar that spans the whole page. If that's the case, update the #menu like so:

#menu{
    float: right;
    margin-top: 35px;
    width: 100%;
    background: #39b54a;
}

Updated: You can wrap your menu div in a menu-wrapper and create a left margin offset:

<header id="nav">
        <h1><a href="#">Title</a></h1>
        <div id="menu-wrapper">
            <div id="menu">
                <ul>
                    <li class="menu_button"><a>button1</a></li>
                    <li class="menu_button"><a>button2</a></li>
                    <li class="menu_button"><a>button3</a></li>
                    <li class="menu_button"><a>button4</a></li>
                </ul>
            </div>     
        </div>
</header>

Working Example: http://jsfiddle.net/gkwpwwyg/1/

Upvotes: 0

bashleigh
bashleigh

Reputation: 9314

I'm not sure why you're using position absolute? Here's what'd I'd do minus the transitions. 

#nav {background:#39b54a;}
#nav:after,#menu> ul:after{content:''; display:block; visability:hidden;clear:both;}/*doesn't work in ie5 or 6*/
/*use clear:both; on the last element*/
#menu {float:right;}
#menu> ul> li {float:left;}

Where ever you have floats. Don't forget to clear them.

Upvotes: 0

HelloWorld
HelloWorld

Reputation: 1103

As far as I understood of what you want, you can use padding-left so the div won't reach the edge of the left side of the screen.

Upvotes: 1

Related Questions