0

I have html code:

<div id="right">right</div>
<table>
    <tr><td>row</td></tr>
</table>

with css:

#right
{
    position: absolute;
    right: 0px;
    border: 2px solid #AAAAAA;
    padding: 20px;
}

and as a result both table and div start at the top of the page but I want table to start below the div. What can I do about it?

jsFiddle: http://jsfiddle.net/jrkno49u/

2
  • 1
    Don't use position:absolute? Then put the div after the table in the HTML where it belongs.
    – Paulie_D
    May 4, 2015 at 17:27
  • Yep, drop it
    – potashin
    May 4, 2015 at 17:28

3 Answers 3

0

You are using absolute positioning so it took the div out of the flow. Hence for table the div doesn't exist. To achieve what you want : You can set position:relative; for div & move the box accordingly to the right by setting it's left property in css.

0

You could also do a float instead of absolute positioning, and then clear the float for the table:

#right
{
    float:right;
    border: 2px solid #ddd;
    padding: 20px;
}
table {
    clear: right;
}

http://jsfiddle.net/jrkno49u/2/

0

You need to do nothing more. Just remove position: absolute; right: 0px; from #right

#right
{
	border: 2px solid #AAAAAA;
   	padding: 20px;
}
<div id="right">right</div>
<table>
    <tr><td>row</td></tr>
</table>

Check Your updated fiddle.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.