How to align two elements in the same line,without overlap

Question

I want to align two elements,in the same line,like this: click here

full code

<div id="element1">  element 1 markup </div> 
<div id="element2">  element 2 markup </div>

css

#element1 {
    display:inline-block;
    margin-right:10px; 
    width:200px; 
    background-color:red;
} 
#element2 {
     display:inline-block; 
     width:200px;
     background-color:red;
}

Also,without overlapping each other.For example if a have a parent div,and two child divs. The parent div,have 1000px width,and the childs have 500px each,so they fit. But if i resize the first div to 600px,i want the second one to auto resize,and keep staying inline,without changing his position,or the first to overlap the second. In the fiddle above,they are aligned in the same line,but doesnt matter what i do,the second one changes his position instead resizing,or they overlap each other. Any idea?

I know it must be done with percentage,but is not working either

it was just an example,of course i will use percentage,but it still wont work — Petru Lebada, Sep 29 '14 at 16:35
It doesn't work for the space between the tags. Look at my answer ;) — PaoloCargnin, Sep 29 '14 at 16:41

score 1 · Answer 1 · answered Sep 29 '14 at 16:40

The width attribute accepts percentage value, base on its parent (or its nearest parent with the position:relative attribute if the element has the property position set as "absolute" or "fixed").

So you can use this CSS to the child

#element1 {display:inline-block;margin-right:10px; width:50%; background-color:red;} 
#element2 {display:inline-block; width:50%; background-color:red;}

PS: If you are using inline-block, you have to make sure that there is no space between the tags, so you HTML must became this

<div id="element1">  element 1 markup
</div><div id="element2">
element 2 markup </div>

For the space beetween the #element1 and #element1, if you want you can use the solution of Nicholas Young, but you will have problem with the height of the parent. Check this -> http://stackoverflow.com/questions/4009931/css-div-height-problem-on-float-set — PaoloCargnin, Sep 30 '14 at 09:40

score 1 · Answer 2 · edited May 23 '17 at 10:33

1

Check this jsfiddle to see if it is what you wanted. I'm not using display:inline-block since it looks that it is what's causing the problem. If you don't mind using floats, then this is your answer.

EDIT:

Check this resource here to see/correct your problem.

edited May 23 '17 at 10:33

Community

1
1

answered Sep 29 '14 at 16:44

tfrascaroli

1,041
1
11
25

http://jsfiddle.net/3fjy1651/ i increased the width of the first element.What i need is,in case a div is resized,the second div must also resize,without changing its position or overlapping each other. – Petru Lebada Sep 29 '14 at 16:46
Sorry, it looks like my fork didnt work. http://jsfiddle.net/1esn0m2t/1/ here it is. – tfrascaroli Sep 29 '14 at 16:52

score 1 · Accepted Answer · answered Sep 29 '14 at 16:50

1

http://jsfiddle.net/a4aME/507/

#element1 {width:50%; background-color:red;float:left} 
#element2 {width:50%; background-color:red;float:left}

Take off the the display: and float it all left.

answered Sep 29 '14 at 16:50

Bioto

1,129
8
21

and in case,the first div resize? lets say there will be an table,and user will add data,and some data will be bigger than the table.The table and the div will resize,making the second div to changing his position or overlapping each other.In this case,i need the second div to resize. – Petru Lebada Sep 29 '14 at 16:53
Then instead of two divs you need to set it up in a table so it handles the resize for you. Two divs will not work. – Bioto Sep 29 '14 at 16:54

How to align two elements in the same line,without overlap

3 Answers3