ARTICLE AD BOX
As far as I know, this should work. It has position set to absolute so there should be no problems. Yet when I test it it scrambles everything. Why is this not working?
What I am trying to do is move the red box to be just like the blue box, except in the center, and both of them still inside the green box. However adding things here still does not make it work.
The code:
div {
positon:absolute;
border: black 1px solid;
margin:none;
padding:none;
}
<div id="topbar" style="top:0px;left:0px;height:50px;border-color:green;">
<div style="left:0px;top:0px;height:inherit;border-color:blue;">
<span>LBCmoLaboratories Vector Editor</span>
</div>
<div style="top:0px;width:366;height:inherit;right:50vw;border-color:red;">
<button id="selectingtools">
<img/>
</button>
<button id="creationtools">
<img/>
</button>
<button id="groupingtools">
<img/>
</button>
<button id="shapetools">
<img/>
</button>
<button id="texttools">
<img/>
</button>
</div>
<div style="right:0px;">
<button id="privew">
<img/>
</button>
<button id="fullpreview">
<img/>
</button>
</div>
</div>
<div id="layers" style="left:0px;top:50px;width:330px;">
<div>
Item 1
</div>
<div>
Item 2
</div>
<div>
Item 3
</div>
</div>
<div style="position:flex;width:flex;">
<canvas>
</canvas>
</div>
<div id="properties" style="float:right;width:330px;">
<div id="layout">
<div>
<div>
<button>Option 1</button>
<button>Option 2</button>
<button>Option 3</button>
</div>
<div>
<button>Option 4</button>
<button>Option 5</button>
<button>Option 6</button>
</div>
<div>
<button>Option 7</button>
<button>Option 8</button>
<button>Option 9</button>
</div>
</div>
<div>
<div>
<div>
</div>
</div>
<div>
<div>
</div>
</div>
<div>
<button>Option b1</button>
<button>Option b2</button>
<button>Option b3</button>
</div>
</div>
<div>
<div>
<div>
</div>
</div>
<div>
<div>
</div>
</div>
<div>
<div>
</div>
</div>
</div>
</div>
<div id="apperance">
<div>
<button>Option 1</button>
<button>Option 2</button>
<button>Option 3</button>
</div>
<div>
<div>
</div>
</div>
<div>
<div>
</div>
</div>
</div>
</div>
The result I am getting:
See image atached
all <div> stay on the left, width filling the entire screen, and do not format correctly.
