CODEWITHSUNDEEP
htmlcss
Michael LeVan
Michael LeVan

Reputation: 548

Row of divs in bottom left corner of parent div

I would like the Divs labeled button to be in the bottom left corner of the parent div instead of where they are now (which is the TOP left corner). Is there a way to do this without using absolute position for each div individually? Here is the HTML and the CSS.

CSS

.button
{
color: blue;
background-color: green;
width: 200px;
font-size: 20pt;
font-family: "Comic Sans";
position: relative;
float: left;
bottom: 0;
}

.button:hover
{
color: red;
background-color: purple;
 }     
#banner
{
height: 300px;
width: 80%;
background-color: pink;
position: absolute;
left: 10%;
right: 10%;
}

HTML 

<div id="banner">
        <div class="button" >Home</div>
        <div class="button">About Us</div>
        <div class="button">Contact Us</div>
        <div class="button">Disciplines</div>
</div>

Upvotes: 0

Views: 161

Answers (4)

dsfg
dsfg

Reputation: 130

You can use the nav tag to create horizontal list views.

Upvotes: 0

Michael J. Anderson
Michael J. Anderson

Reputation: 479

Add this to your css:

#buttonrow {
    position: absolute;
    bottom: 0;
    right: 0;
}

Change your markup to include a wrapper div:

<div id="banner">

<div id="buttonrow">

<div class="button" >Home</div>
<div class="button">About Us</div>
<div class="button">Contact Us</div>
<div class="button">Disciplines</div>

</div>

</div>

Upvotes: 1

Joke_Sense10
Joke_Sense10

Reputation: 5412

You can do it without using position:absolute.i.e by setting margin.

Try this:

.button {
background-color: #008000;
bottom: 0;
color: #0000FF;
float: left;
font-family: "Comic Sans";
font-size: 20pt;
margin-top: 268px;
position: relative;
width: 200px;
}

Demo : http://jsfiddle.net/z5UNd/

Upvotes: 0

Mohsen Safari
Mohsen Safari

Reputation: 6795

change your HTML and CSS like this:

jsFiddle

HTML

<div id="banner">
    <div id="container">
        <div class="button" >Home</div>
        <div class="button">About Us</div>
        <div class="button">Contact Us</div>
        <div class="button">Disciplines</div>
    </div>
</div>

CSS

.button
{
color: blue;
background-color: green;
width: 200px;
font-size: 20pt;
font-family: "Comic Sans";
position: relative;
float: left;
bottom: 0;
}

.button:hover
{
color: red;
background-color: purple;
 }     
#banner
{
height: 300px;
width: 80%;
background-color: pink;
position: absolute;
left: 10%;
right: 10%;
}
#container{  /*  add this class  */
    position:absolute;
    bottom:0;
}

Upvotes: 0

Related Questions