CODEWITHSUNDEEP
csshtml
James
James

Reputation: 1925

How to make the divs inline when adding another div?

Please check out this link quickly:

http://jsfiddle.net/8grSk/

As you can see the text as the bottom is aligned to the left side of the page

I want to add text to the right side of the page inline with the text already present.

How is this done?

I am finding it difficult to align all these divs!

Thanks guys!

James

Upvotes: 0

Views: 61

Answers (2)

Kyle
Kyle

Reputation: 67244

You should refactor the HTML. Instead if using divs, use an unordered list <ul>, then you can list your four links and float the <ul> left within the footer.

Then use another <ul> but this time float it right and voila, lined up links as you want them (I hope.)

<div class="footer1">

    <ul id="footer-left">
        <li id="footer1text">About Us</li>
        <li id="footer1text">Accessibility</li>
        <li id="footer1text">Recruiters</li>
        <li id="footer1text">Contact Us</li>

    </ul>
    <ul id="footer-right">
        <li id="footer1text">New Text</li>
    </ul>
</div>

CSS

.footer {
    background: #FFFFFF;
    border: 1px solid;
    color: #e6e6e6;
    height: 30px;
    width: 100%;
    position:absolute;
    margin: 0px 0px 0px 0px;
    padding:0;
    display: table;
}

.footer1 {
    background: #FFFFFF;
    height: 30px;
    width: 350px;
    position:absolute;
    margin: 0px 0px 0px 0px;
    padding:0;
}

#footer1text {
    font: 13px helvetica;
    color: #0040FF;
    padding: 8px 3px 3px 3px;
    display: table-cell;
}

#footer1text:hover {
    font: 13px helvetica;
    color: #0040FF;
    padding: 8px 3px 3px 3px;
    text-decoration: underline;
}

#footer-left li
{
    float: left;
}

#footer-right li
{
    float: right;
}

Working demo here :)

Upvotes: 1

Andres I Perez
Andres I Perez

Reputation: 75409

You can easily rewrite everything to accommodate two regions (left and right) inside of your footer id like so:

HTML

<html>
<head>
<link href="test.css" rel="stylesheet" type="text/css" />
</head>

<body>

<div id="footer" style="position:absolute;bottom:0;">

<div class="left">
    <a href="#">About Us</a>
    <a href="#">Accessibility</a>
    <a href="#">Recruiters</a>
    <a href="#">Contact Us</a>
</div>
<div class="right">
    <a href="#">About Us</a>
    <a href="#">Accessibility</a>
    <a href="#">Recruiters</a>
    <a href="#">Contact Us</a>
</div>

</div>

</body>

</html>

CSS

 body {
    margin: 0;
    padding: 0;
}

#footer {
    background: #FFFFFF;
    border: 1px solid;
    color: #e6e6e6;
    height: 30px;
    width: 960px;
    position:absolute;
    float: left;
    margin: 0px 0px 0px 0px;
    padding:0;
}

#footer a {
    font: 13px helvetica;
    color: #0040FF;
    padding: 8px 12px 3px 3px;
}

#footer a:hover {
    font: 13px helvetica;
    color: #0040FF;
    padding: 8px 3px 3px 3px;
    text-decoration: underline;
}

.right {
    float:right;
}

.left {
    float:left;
}

demo

http://jsfiddle.net/8grSk/8/

-- edit

changed the fiddle to accommodate for your hover state better.

Upvotes: 1

Related Questions