I think you misunderstand what it means to "do it without CSS". Remember that "CSS" effectively refers to the layout system used by every web-page in a modern web-browser (and by "modern" I mean: made since 2001).
So a web-page with no explicit style=""
attributes, no <style>
elements and no <link rel="stylesheet" />
elements is still using CSS: it still has the built-in user-agent stylesheet. If you use the now-obsolete presentational elements and attributes like <font>
and border=""
then those are converted into CSS rules by the browser. My point is that it's impossible to not use CSS.
...so I assume by "without CSS" you really mean "without an external stylesheet" or "without a separate <style>
element", but in your comment reply you said that using <style>
is acceptable, so I think you're confused about what your restrictions are:
Thank you for your reply Dai. Inline <style>
works for me. How could it leads to solve the place two divs side by side? I do not want to do it without css, but i have to. It is all about to create an html file with plotly.js
Anyway, if you can use <style>
, then just do something like this:
<style>
#parent {
display: flex;
}
#parent > div {
flex-basis: 50%;
flex-grow: 1;
flex-shrink: 1;
}
#left {
border: 1px solid red;
}
#right {
border: 1px solid blue;
}
</style>
<div id="parent">
<div id="left">
</div>
<div id="right">
</div>
</div>
And if you cannot use <style>
but you can use inline style=""
attributes, then you can still do this:
<div id="parent" style="display: flex;">
<div id="left" style="flex-basis: 50%; flex-grow: 1; flex-shrink: 1; border: 1px solid red;">
</div>
<div id="right" style="flex-basis: 50%; flex-grow: 1; flex-shrink: 1; border: 1px solid blue;">
</div>
</div>
If you cannot add your own <style>
elements nor style=""
attributes then your only remaining option for laying out elements is by abusing <table>
- but I won't post an example using <table>
because I don't want to encourage others to do so - and because I've never encountered a system that allowed arbitrary elements but did not allow at least for custom style=""
attributes.
display: block
by default, so you need to switch to other type of elements, such asspan
– Yegor Androsov Oct 18 '20 at 12:10style=""
attribute? Or do you mean just external CSS? What about inline<style>
? – Dai Oct 18 '20 at 12:15