CODEWITHSUNDEEP
htmlcss
javanoob
javanoob

Reputation: 6410

css help in aligning elements

https://jsfiddle.net/yjb7rkck/

Code:

<body>
    <div id="parentDiv" style="width:200px;">
        <p style="position:relative;margin-left:0px;">Element1</p>
        <a href="#" style="position:relative;margin-right:0px;">Element2</a>
        <br/>
        <div id="ElementThreeDiv"             style="float:left;height:250px;overflow:auto;">
            <p>Element3</p>
        </div>
    </div>
</body>

I am trying to achieve the below requirements:

  1. All the elements 1,2 & 3 should be in a width of 200px as defined for parent Div
  2. Element 1 should be left aligned.
  3. Element 2 should be right aligned.
  4. Element 3 should be on the next line.

Upvotes: 0

Views: 35

Answers (1)

j08691
j08691

Reputation: 207861

Here you go. Float the first left, the second right, and clear the third. I added the background and overflow on the container to see it more clearly.

#parentDiv p {
    float:left;
    margin:0;
}

#parentDiv a {
    float:right;
}

#parentDiv div {
    clear:both;
}

jsFiddle example

Upvotes: 1

Related Questions