I try some tips on other Stackoverflow queries but it does not apply here. This is what I want.
* {
box-sizing: border-box;
}
html {
height:100%;
width:100%;
border: 0px;
margin:0;
padding:0;
}
body {
height: inherit;
width: inherit;
border: 0px;
margin:0;
padding:0;
}
header {
font-size: 30px;
text-align: center;
width: 100%;
font-family: Lato;
}
hr {
margin: 0;
}
main {
width: inherit;
height: inherit;
border:0px;
margin: 0;
padding: 0;
}
.headerLeft {
border-right: 2px solid gray;
width: 50%;
text-align: center;
display: inline-block;
}
.headerRight {
width: 50%;
text-align: center;
display: inline-block;
}
.bold {
font-weight: 900;
}
.figure1 {
width: 300px;
height: 300px;
}
.figure1 img {
width: 400px;
/* height: auto; */
}
.figCap1 {
font-size: 17px;
font-weight: 900;
font-family: Lato;
}
#offsetTittle {
font-size: 17px;
font-weight: 900;
font-family: Lato;
}
#brainstormSection {
display: inline-block;
width: 50%;
height: inherit;
padding-left: 20px;
border-right: 2px solid gray;
}
#notesSection {
padding-left: 20px;
display: inline-block;
width: 50%;
height: inherit;
padding-right: 20px;
border-right: 2px solid gray;
}<html>
<head>
<title>Notes:</title>
<link href="https://fonts.googleapis.com/css2?family=Lato:wght@900&display=swap" rel="stylesheet">
<link rel="stylesheet" href="./css/style.css" type="text/css">
<link rel="stylesheet" href="../globalResources/css/normalize.css">
</head>
<body><!--
--><header>
<div class="headerLeft"><span class="bold">Notes</span></div><div class="headerRight"><span class="bold">Brainstorm</span></div>
</header><!--
--><hr><!--
--><main><!--
--><section id="notesSection">
<figure class="figure1">
<figcaption class="figCap1">Hope to use this if is advatageous:</figcaption>
<br>
<a href="https://www.codecademy.com/paths/web-development/tracks/styling-a-website/modules/local-website-development/articles/visual-studio-code" target="_blank">
<img src="https://i.imgur.com/Bs9e3k2.png" alt="CodeAcademy Article"></a>
</figure>
<hr>
<article>
<span class="bold" id="offsetTittle">Offset:</span>
<p>Offset is the distance at which the element was moved from its original location; This is seen when you position an element.</p>
<a href="https://stackoverflow.com/questions/9264767/internet-explorer-box-model-what-is-offset/15974969#15974969" target="_blank"><img src="https://i.stack.imgur.com/vvBJo.png" alt=""></a>
<img src="https://i.stack.imgur.com/BPFut.png" alt="">
<p>In the end this is an issue of mere semantics. Whether we call it "offset" or "position," it's still the same thing; it's the distance from its original location.</p>
</article>
</section><!--
--><section id="brainstormSection">
<figure class="figure1">
<figcaption class="figCap1">Hope to use this if is advatageous:</figcaption>
<br>
<a href="https://www.codecademy.com/paths/web-development/tracks/styling-a-website/modules/local-website-development/articles/visual-studio-code" target="_blank">
<img src="https://i.imgur.com/Bs9e3k2.png" alt="CodeAcademy Article"></a>
</figure>
<hr>
<article>
<span class="bold" id="offsetTittle">Offset:</span>
<p>Offset is the distance at which the element was moved from its original location; This is seen when you position an element.</p>
<a href="https://stackoverflow.com/questions/9264767/internet-explorer-box-model-what-is-offset/15974969#15974969" target="_blank"><img src="https://i.stack.imgur.com/vvBJo.png" alt=""></a>
<img src="https://i.stack.imgur.com/BPFut.png" alt="">
<p>In the end this is an issue of mere semantics. Whether we call it "offset" or "position," it's still the same thing; it's the distance from its original location.</p>
</article>
</section><!--
--></main>
</body>
</html>Problem: #notesSection is not in the same line as the #brainstormSection when the two are inline-block
I try to eliminate spaces, reset and make 100% width and height the HTML, body, and main tags, I know it can be solved with the float property but it can be solved only with display: inline-block? also
UPDATE: Resolve the issue of not seeing the inline-block effect, just eliminate tamper whitespaces CSS create, but I'm having problems with the borders, It's challenging to make a perfect table like in this one obviously with perfectly straight and even borders.
Is a hassle to adjust everything to be perfect in width and height by subtracting every tamper pixel is added or modifications that add pixels like creating the borders, padding between the content and borders to make the inner content readable, and other future modifications that screw up the perfect arrangement of the borders.
Exist a better way to skip this adjustment hassle? For example, What other CSS toolkit options exist to create this two-column webpage projects like this one?
UPDATE TWO: Yes! I hope is almost done, you are helping me a lot you' all that comment! But know exists a big gap on the border that is between the #headerBrainstorm and the content of the #sectionBrainstorm click, there are good news, I know is caused by the declaration padding: 20px; with the selector #notesSection click, but I not know why this happens when the two sections live in discrete different containers and I reset ALL to box-size: border-box;, I wonder why this happens.
Thanks for your help.
