Html Question posted in
Some basic documentation can be found here.

Html – How can i fix my CSS so that width accounts for both padding and border?

To put it simply, i want my sidebar here to be 20% of the width of the page, while the article itself is 80%. Because of the padding in my different sections, the width is offset, meaning i have to lower the values to get it all to fit side by side.

Here is a code snippet of my HTML and CSS:

ul{
    background-color: #fdf6e3;
    padding: 5px;
    text-align: center;
    border-radius: 5px;
    margin: 0px;
}
article {
    float: left;
    width: calc(80% - 30px);
    padding: 5px;
    margin: 10px;
    background-color: #fdf6e3;
    border-radius: 5px;
    box-sizing: border-box;
}
footer {
    margin: 10px;
    background-color: #fdf6e3;
    border-radius: 5px;
    clear: left;
    width: 100%;
}
a{
    color: #dc322f;
    padding-left: 5px;
    padding-right: 5px;
}
body{
    background-color: #eee8d5;
    color: #002b36;
    font-family: 'Times New Roman', 'Courier New' monospace
}
u{
    color: #d33682;
}
i {
    color: #d33682;
}

.icon {
    width: 48px;    margin-top: 10px;
    border-radius: 8px;
}
.sidebar {
    float: left;
    width: calc(20%);
    background-color: #fdf6e3;
    margin-top: 10px;
    border-radius: 5px;
    box-sizing: border-box;
}
.footersection {
    float:left;
}
.footerbackground {
    background-color: #fdf6e3;
    border-radius: 5px;
    width: 100%;
}
<head>
    <title>big balls</title>
    <link rel="stylesheet" href="styles.css" />
</head>

<body>
    <nav>
        <ul>
            <a href="http://www.github.com" target="_blank"><img class="icon" src="images/github.png" /></a>
            <a href="http://www.google.com" target="_blank"><img class="icon" src="images/google.png" /></a>
            <a href="https://en.wikipedia.org" target="_blank"><img class="icon" src="images/wikipedia.jpg"></a>
            <a href="https://gitlab.com" target="_blank"><img class="icon" src="images/gitlab.png" /></a>
        </ul>
    </nav>
    <section class="sidebar">
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec urna massa, bibendum vel tellus non, temporus purus, a luctus enim facilisis quis. <u>Praesent consequat molestie</u> velit in interdum.
        </p>            viverra justo. Quisque vestibulum eleifend mauris, viverra facilisis odio ullamcorper quis. Pellentesque
            lobortis dolor ac ultrices malesuada. Pellentesque facilisis tincidunt iaculis. Fusce feugiat nunc metus.
            Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Etiam in sem nec mi
            porta ultrices eget at lectus. In sagittis eu est in interdum. Aliquam in massa ac lacus cursus viverra eget
            sit
            amet justo. Praesent eleifend, magna vitae aliquet egestas, purus risus convallis purus, non aliquet diam
            ipsum
            vitae dui. Vivamus mollis metus eu lectus malesuada, non tempor nulla accumsan. Aliquam erat volutpat.
            Vivamus
            convallis lac
    </section>

    <article>
        
        <p>
            Sed sollicitudin placerat quam, a semper massa pharetra a. Donec commodo malesuada neque, et congue orci
        </p>
        <p>
            Donec sit amet dignissim lorem. Ut at neque at ex blandit dapibus vel nec nisi. Mauris malesuada diam vitae
        </p>
        <p>
            <u>Suspendisse et fermentum metus, nec vulputate enim.</u> Aenean eu sem risus. Ut viverra porta est, at tincidunt
        </p>
        <p>
            Aliquam porta pharetra fermentum. Nulla pulvinar imperdiet interdum. Nulla placerat commodo blandit. Mauris
        </p>
        <p>
            Sed accumsan orci ante, ut auctor mi rhoncus eget. Aliquam a dolor pulvinar, malesuada enim quis, fringilla
            faucibus vulputate.
        </p>
        <p>
            Quisque ullamcorper mauris at lectus rhoncus, a auctor sem lobortis. Sed lectus sapien, vehicula quisest.
        </p>
        <p>
            Duis lobortis ex neque. Aenean maximus metus congue augue elementum, et commodo est mattis. Morbi
            augue libero, at scelerisque sem volutpat id.
        </p>
        <p>
            Nam vehicula mauris eu commodo imperdiet. Etiam turpis tortor, semper sed dolor ornare, rutrum tincidunt
        </p>
        <p>
            Vestibulum sed molestie ligula, vel ultricies arcu. Nullam dapibus neque rhoncus tellus pulvinar, vitae
            lacinia
        </p>
        <p>
            Curabitur condimentum nulla urna, a dictum magna egestas sit amet. Phasellus sapien lectus, suscipit at
        </p>
        <p>
            Mauris sed sapien vitae diam laoreet semper. Aenean porta fringilla magna non rhoncus. Curabitur vestibulum

        </p>
        <p>
            Nunc lacinia nec mi non malesuada. Vivamus suscipit non turpis ut hendrerit. Nunc at mauris viverra,

        </p>
    </article>
    <footer>
        <div class="footerbackground">
            <div class="footersection">
                <p>
                    bullshittery
                </p>
        </div>      
    </footer>
</body>

I’m just learning HTML and CSS now, so apologies if the solution is fairly easy.

I have already tried changing box-sizing to border-box in the CSS to no luck. Changing the article’s width to something like 78% works, but it is not aligned well to the rest of the webpage.

Tags:

3

Answers


  1. 0

    For the side by side view for sidebar and article section you can use flex property very easy way with a parent div. for more details check example snippets.

    ul{
    background-color: #fdf6e3;
    padding: 5px;
    text-align: center;
    border-radius: 5px;
    margin: 0px;
}
article {
    width: 80%;
    padding: 5px;
    background-color: #fdf6e3;
    border-radius: 5px;
    box-sizing: border-box;
}
footer {
    margin: 10px 0;
    border-radius: 5px;
    width: 100%;
    display: flex;
   text-align: center;
}
a{
    color: #dc322f;
    padding-left: 5px;
    padding-right: 5px;
}
body{
    background-color: #eee8d5;
    color: #002b36;
    font-family: 'Times New Roman', 'Courier New' monospace
}
u{
    color: #d33682;
}
i {
    color: #d33682;
}

.icon {
    width: 48px;    margin-top: 10px;
    border-radius: 8px;
}
.wrapper{
display: flex;
    margin-top: 10px;
    gap: 0 10px;
}
.sidebar {
    width: 20%;
    background-color: #fdf6e3;

    border-radius: 5px;
    box-sizing: border-box;
}

.footerbackground {
    background-color: #fdf6e3;
    border-radius: 5px;
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding: 0 10px;
}
    <nav>
    <ul>
        <a href="http://www.github.com" target="_blank"><img class="icon" src="images/github.png" /></a>
        <a href="http://www.google.com" target="_blank"><img class="icon" src="images/google.png" /></a>
        <a href="https://en.wikipedia.org" target="_blank"><img class="icon" src="images/wikipedia.jpg"></a>
        <a href="https://gitlab.com" target="_blank"><img class="icon" src="images/gitlab.png" /></a>
    </ul>
</nav>

<div class="wrapper">
<section class="sidebar">
    <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec urna massa, bibendum vel tellus non, temporus
        purus, a luctus enim facilisis quis. <u>Praesent consequat molestie</u> velit in interdum.
    </p> viverra justo. Quisque vestibulum eleifend mauris, viverra facilisis odio ullamcorper quis. Pellentesque
    lobortis dolor ac ultrices malesuada. Pellentesque facilisis tincidunt iaculis. Fusce feugiat nunc metus.
    Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Etiam in sem nec mi
    porta ultrices eget at lectus. In sagittis eu est in interdum. Aliquam in massa ac lacus cursus viverra eget
    sit
    amet justo. Praesent eleifend, magna vitae aliquet egestas, purus risus convallis purus, non aliquet diam
    ipsum
    vitae dui. Vivamus mollis metus eu lectus malesuada, non tempor nulla accumsan. Aliquam erat volutpat.
    Vivamus
    convallis lac
</section>

<article>
  <h2>Article</h2>
    <p>
        Sed sollicitudin placerat quam, a semper massa pharetra a. Donec commodo malesuada neque, et congue orci
    </p>
    <p>
        Donec sit amet dignissim lorem. Ut at neque at ex blandit dapibus vel nec nisi. Mauris malesuada diam vitae
    </p>
    <p>
        <u>Suspendisse et fermentum metus, nec vulputate enim.</u> Aenean eu sem risus. Ut viverra porta est, at
        tincidunt
    </p>
    <p>
        Aliquam porta pharetra fermentum. Nulla pulvinar imperdiet interdum. Nulla placerat commodo blandit. Mauris
    </p>
    <p>
        Sed accumsan orci ante, ut auctor mi rhoncus eget. Aliquam a dolor pulvinar, malesuada enim quis, fringilla
        faucibus vulputate.
    </p>
    <p>
        Quisque ullamcorper mauris at lectus rhoncus, a auctor sem lobortis. Sed lectus sapien, vehicula quisest.
    </p>
    <p>
        Duis lobortis ex neque. Aenean maximus metus congue augue elementum, et commodo est mattis. Morbi
        augue libero, at scelerisque sem volutpat id.
    </p>
    <p>
        Nam vehicula mauris eu commodo imperdiet. Etiam turpis tortor, semper sed dolor ornare, rutrum tincidunt
    </p>
    <p>
        Vestibulum sed molestie ligula, vel ultricies arcu. Nullam dapibus neque rhoncus tellus pulvinar, vitae
        lacinia
    </p>
    <p>
        Curabitur condimentum nulla urna, a dictum magna egestas sit amet. Phasellus sapien lectus, suscipit at
    </p>
    <p>
        Mauris sed sapien vitae diam laoreet semper. Aenean porta fringilla magna non rhoncus. Curabitur vestibulum

    </p>
    <p>
        Nunc lacinia nec mi non malesuada. Vivamus suscipit non turpis ut hendrerit. Nunc at mauris viverra,

    </p>
</article>
</div>


<footer>
    <div class="footerbackground">
        <div class="footersection">
            <p>
                bullshittery
            </p>
        </div>
        <div class="footersection">
            <p>
                more saosudsiod
            </p>
        </div>
    </div>
</footer>
    Login or Signup to reply.
  2. 0

    I recomend you to use margins with %. So calculate the total size of your section this way:
    margin-left(%) + width(%) + margin-rigth(%)

    The sum should not be greater than 100 because it will leave the screen or in your case, since you use float, it will be placed below
    So you have to do the calculations like this:

    sidebar:

    margin-left(%) + width(%) + margin-rigth(%) = 20(%)

    article:

    margin-left(%) + width(%) + margin-rigth(%) = 80(%)

    Total:

    sidebar(20%) + article(80%) = 100%

    The css must be like this:

    article {
    width: 78%;
    margin: 0 1%;
    /*0 is margin-top and margin-bottom*/
    /*1% is margin-left and margin-right*/
}
    Login or Signup to reply.
  3. 0

    Create a div tag with a class name and put both sidebar and the article inside it. Then go to your CSS code and modify it like this.

    .first{
    display: flex;
    }

    ‘.first’ is the class name of that div tag. try that

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search