What is the HTML and CSS code to create a webpage with 3 separate columns?

Looking to create 3 vertical columns on an HTML page:

#navbar {width:15%}

#content {width:70%}

#right {width:15%}

Implemented this stylesheet for the layout:

#container {
  position: fixed;
  float: none;
  overflow: visible;
  height: auto;
  width: 100%;
  border: none;
  margin-left: 0%;
  margin-right: 0%;
  padding-left: 0%;
  padding-right: 0%;
}

#navbar {
  float: left;
  display: block;
  position: relative;
  text-align: justify;
  width: 15%;
  background: black;
}

#content {
  float: none;
  display: block;
  position: static;
  background-size: 100%;
  width: 75%;
  margin-left: 15%;
  right: 10%;
  bottom: 0;
  padding: 0;
}

#right {
  float: right;
  display: block;
  position: static;
  text-align: justify;
  width: 10%;
  background: black;
  left: 85%;
}

.page {
  position: fixed;
  margin-left: 0%;
  margin-right: 0%;
  padding-left: 0%;
  padding-right: 0%;
}
<div class="page">
  <div id="container">
    <div id="navbar">
      navbar
    </div>
    <div id="content">
      content
    </div>
    <div id="right">
      <form action="SessionDestroy" method="POST">
        right panel
      </form>
    </div>
  </div>
</div>

Despite setting the margin as 0%, there seems to be a gap between the main display and the container when running the code.

https://i.sstatic.net/pPPoa.jpg

https://i.sstatic.net/sfwsB.jpg

Any suggestions on resolving this issue?

htmlcss

Answer №1

Web Design

<html>
<div class="site">
        <div id = "wrapper">
            <div id = "header">
                Header
            </div>
            <div id = "main">
                Main Content
            </div>
            <div id = "sidebar">
                <form action="Logout" method="POST">
                    Sidebar Widget
                </form>
            </div>
        </div>
    </div>
</html>

CSS Styling

    html{margin:0px;}
#wrapper{
            position: fixed;
            float:none;
            overflow: visible;
            height: auto;
            width: 100%;
            border: none;
            margin-left: 0%;
            margin-right: 0%;
            padding-left: 0%;
            padding-right: 0%;

    }
    #header{
            float: left;
            display:block;
            position:relative;
            text-align: justify;
            width: 15%;
            background: black;
    }


    #main{
        float: left;
        display: block;
        position: static;
        background-size:100%;
        width: 70%;      
        right: 10%;
        bottom: 0;
        padding: 0;
        text-align:center
}

#sidebar{
        float: right;
        display:block;
        position: static;
        text-align: justify;
        width:10%;
        background: black;
        left: 85%;
}
.site{
        position: fixed;
        margin-left: 0%;
        margin-right: 0%;
        padding-left: 0%;
        padding-right: 0%;
}

Answer №2

The issue appears to be centered around the CSS rule margin: 8px applied to the body element. This is causing the container to have a reduced available area of 100% - 8px, resulting in an 8px gap.

Consider utilizing the following CSS adjustment: body{margin:0px;}

Hopefully this solution resolves the problem for you.

Answer №3

Success is within reach.

#main-content {
  /*float: none;*/
  display: block;
  float: left;      /* Include this statement */
  position: static;
  background-size: 100%;
  width: 75%;
  /*margin-left: 15%;*/
  right: 10%;
  bottom: 0;
  padding: 0;
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The background-image in CSS is not appearing as expected

I need help creating a header with a logo link that changes color when hovered over. To achieve this, I want to use the "background-image" property instead of placing an img tag directly in the HTML. However, I am facing issues getting my logo to display w ...

htmlcsssassbackgroundbackground-image

Need a guide to identify HTML elements with a particular attribute?

I attempted to find this information online, but I wasn't successful. Suppose I am interested in knowing all the HTML elements that contain a "background" attribute. I'm aware that some web browsers may not support certain elements. Off the top ...

htmlcssdom

Adjusting image alignment and formatting long text with CSS in Firefox

I'm attempting to float an image and text within a paragraph, but encountering an issue when the text is long and in one line. The display appears fine in Chrome, but not in Mozilla Firefox. You can view the problem here: In Chrome, it looks like thi ...

htmlcssgoogle-chromefirefox

Developing a personalized Avada form auto-scrolling algorithm

Our form, created using the Wordpress - Avada theme, needs an autoscroll feature. As users answer questions, the next question appears below, but this is not immediately visible on mobile devices. To address this, we require autoscroll functionality. The ...

javascripthtmljqueryformsautoscroll

html interactive/expandable tree

I've come across this code which generates an HTML tree, but I'm facing an issue where the tree expands every time I refresh the page. What I want to achieve is to have certain branches expanded and others collapsed when the page is opened, depe ...

javascriptjqueryhtmlcss

Revolving mechanism within React.js

I am currently developing a lottery application using React.js that features a spinning wheel in SVG format. Users can spin the wheel and it smoothly stops at a random position generated by my application. https://i.stack.imgur.com/I7oFb.png To use the w ...

javascriptcssreactjs

I'm having trouble inserting my object into the scene: THREE.Object3D.add: the item is not a valid instance of THREE.Object3D

Recently, I started using three.js. Initially, I utilized a JSON file for my 3D model but encountered issues when exporting it from Blender. To resolve this, I decided to switch to obj files. Although the new obj model is working fine, I am struggling with ...

javascripthtmlthree.jsobjloader

Is it necessary to define the height and width of images while utilizing bootstrap img-fluid?

I recently came across information stating the importance of always including height and width attributes for images. However, I am currently using Bootstrap's img-fluid class which automatically adjusts the height and width responsively. This has led ...

htmlbootstrap-4bootstrap-5

Is left padding appearing mysteriously (supernatural CSS phenomenon)?

While using the Firebug inspector tool, if you hover over #jimgMenu ul, you may notice that it has left padding without any corresponding CSS rule: Where is this mysterious left padding coming from? Why is the origin not visible? EDIT: If you navigate t ...

jquerycss

Loading animation reminiscent of a whirlpool, similar to the movement

In my quest for the perfect animation, I have scoured far and wide. Unfortunately, the one I found at http://jsfiddle.net/pedox/yed68/embedded/result/ is created using css, which many browsers do not yet support fully. I also explored , but found it to be ...

javascriptajaxhtmlloader

Django is looking for a primary key that I do not possess

Encountering an issue: invalid literal for int() with base 10: 'ljrh' This error occurs when attempting to add a new entry in a model: day = itemize(value, getday(strip(key))) add = Reoccurring(request.user.username, strip(day.Day), strip(day. ...

pythonhtmldjangohttppost

Selenium can locate an element by its CSS selector that comes after a specific element

How can I locate the text "Interesting" which is the first occurrence of the class b after h1.important when using Selenium? <div class="a"> <div class="b">Not interesting</div> </div> <div class="title"> <h1 c ...

pythoncssseleniumxpathcss-selectors

Tips for effectively showcasing a span class field

Can someone help me with an issue I am having in Chrome browser where I am trying to display two "text text-pass" from HTML to my print console but it is not working? Any advice would be appreciated. Here is my browser HTML code: <a href="/abc/123" ...

javahtmlseleniumselenium-webdriverxpath

When the button is clicked, it triggers a change and updates the records in the database. The

There is a single button named "delete" that, when clicked by a user, will change the text to "restore" and perform a delete action in the database. The same functionality should apply to the restore button, where clicking it will change the text back to " ...

javascriptphpjqueryajaxhtml

Eliminating render-blocking CSS in PageSpeed - one stylesheet at a time

Currently, I am testing the best optimization practices for front-end development. As part of this process, I have utilized gulp and npm to merge and minify my CSS and JS files into a single all.min.css and js.min.css file. Upon analyzing my website using ...

htmlcssnpmgulppagespeed

CSS/HTML: Aligning Buttons Horizontally on a Row

I've been attempting to align all the buttons at the same height on a single line. I experimented with various min-height settings for different classes, but so far have not found a solution. The issue pertains to the red buttons located below each pr ...

htmlcsswordpress

What is the best way to incorporate external libraries and plug ins such as owl.carousel.js into HTML and CSS?

I've been exploring the idea of adding a carousel to my website and stumbled upon owl.carousel.js during my research. The layout and features seem to align with what I'm looking for, which is great! As a newbie in this field, I could use some gu ...

javascriptjqueryhtmlcss

Place the object into a vacant area with the help of jQuery Sortable

I am using jQuery Sortable and it's functioning well. However, I have encountered a small issue that I need help with.    I have two blocks where elements from one block can be moved to the other. The problem arises when all the elem ...

javascriptjqueryhtmljquery-ui-sortable

Enhance a disabled button by incorporating a ripple effect

I've got a button that toggles on and off depending on the required form fields. When it's enabled, clicking it activates a ripple effect. Now I'd like to have the ripple effect even when the button is disabled. I attempted something simila ...

cssvue.jsvuejs3vue-composition-apiquasar-framework

Unable to adjust SVG fill color

I'm having trouble changing the fill color of an SVG when the user hovers over it. Can someone help me figure out why my code isn't working? svg:hover { fill: blue; } <svg width="0" height="0" class="hidden"> <symbol viewBox="0 0 ...

csssvg