New course! Every coder should learn Generative AI!
Try a free lesson+ 1
why is it impossible to put two things next to each other, like a header and a div, how can I fix it
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)
+ 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>
+ 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
+ 2
since both are block elements so it will be displayed in new line..
use display:inline; hope it works..
+ 1
Make sure the combined widths (and all of the padding or margins) fit on the device's screensize.
0
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.
- 1
didnt work at all
Often have questions like this?
Learn more efficiently, for free:
Hot today
Internal vs external JS
2 Votes
[SOLVED] Ballpark Challenge
1 Votes
Python Core
0 Votes
Who will
0 Votes