+ 1

why is it impossible to put two things next to each other, like a header and a div, how can I fix it

19th Jul 2017, 12:37 PM

ammar adiga

7 Answers

+ 6

Many ways to achieve that, among which: + Use css 'display:inline-block' (and explicit width if content will need more than only one text line) to avoid default behaviour of block element (taking whole width available, and breaking line between blocks)... + Use of css 'float' property + Use <table> behaviour applied through css 'display' property with values of table family to other semantically better content suited elements + Use 'flexbox' new Html5 box model + Use 'grid' new Html5 box model (The two last are supported only on very latest browsers actually)

19th Jul 2017, 12:49 PM

visph

+ 4

Implementation of first way suggested: <!DOCTYPE html> <html> <head> <title>Page Title</title> </head> <body> <header style="display:inline-block;">Header content</header> <div style="display:inline-block;">Div content</div> </body> </html>

19th Jul 2017, 12:50 PM

visph

+ 3

This code show <header> and <div> right next each other... but as I previously said require explicit with for more content than the example: <!DOCTYPE html> <html> <head> <title>Page Title</title> </head> <body> <header style="border:1px red solid; width:20%; display:inline-block;">Header content</header> <div style="border:1px green solid; width:40%; display:inline-block;">Div content</div> </body> </html> This one will show borders of elements, to better understand how it's work: block are bottom aligned by default, and you should set another vertical alignement to the parent element to control it... Anyway, I've suggested other way to do, because each is best suited for different cases ;P

19th Jul 2017, 1:20 PM

visph

+ 2

since both are block elements so it will be displayed in new line.. use display:inline; hope it works..

19th Jul 2017, 12:41 PM

Мг. Кнап🌠

+ 1

Make sure the combined widths (and all of the padding or margins) fit on the device's screensize.

19th Jul 2017, 1:17 PM

James

In your CSS for the element, include "display: inline;" or "display: inline-block". By default, most elements have "display: block" instead, meaning they take up all the space next to them horizontally.

19th Jul 2017, 12:44 PM

James

- 1

didnt work at all

19th Jul 2017, 1:09 PM

ammar adiga