"Struggling with the 2-Column Layout Glitch

I attempted to follow a tutorial for creating a 2 column layout from this person:

Here is the result of my implementation: / http://jsfiddle.net/WrpA8/

The CSS:

#container {
    width: 800px;
    margin: 40px auto;
    border: 1px solid black;
}
#header {
    border: 1px solid black;
}
#sidebar {
    float: left;
    width: 200px;
    padding: 4px;
    border: 1px solid black;
}
#content {
    float: left;
    width: 600px;
    padding: 4px;
    border: 1px solid black;
}
#footer {
    clear: both;
    border: 1px solid black;
}

Answer №1

Both border and padding play a role in determining an element's total width. To better understand this concept, set both the border and padding values to 0 and observe how the layout behaves accordingly. Keep in mind that if you choose to include a border and padding, you must account for their dimensions when sizing the main element.

Answer №2

Your content is being affected by the padding and border settings of 600px. To resolve this, consider adjusting the width to 580px instead.

#content {
    float: left;
    width: 580px;
    padding:4px;
    border: 1px solid black;
}

Alternatively, you can remove the padding and border entirely if you prefer to maintain the initial 600px size.

View the demonstration here

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

Aligning content vertically in Bootstrap 4 so it is centered

I've been struggling to center my Container in the middle of the page using Bootstrap 4. I haven't had much luck so far. Any suggestions would be greatly appreciated. You can check out what I have so far on Codepen.io and experiment with it to s ...

Change the position on the second click

I am trying to implement a manual sorting feature for a table of persons. The idea is to allow users to select a person by clicking on the row, then select another person by clicking on them, and have the two selected rows switch positions without using dr ...

What are some solutions for resolving a background image that fails to load?

HTML: `<div class="food-imagesM imagecontainer"> <!--Page info decoration etc.--> </div>` CSS: `.food-imagesM.imagecontainer{ background-image: url("/Images/Caribbean-food-Menu.jpg"); background-repeat: no-repeat; backgroun ...

The vertical alignment of the wrapper div does not support multiple lines of text

I am having trouble achieving vertical alignment (middle) for a div with 2 lines of text. I can do it with one line, but not two. I want one of the lines to be formatted like a h2 heading, and the other like a regular paragraph. I understand that I could s ...

When working with TextareaAutosize component in MUI, an issue surfaces where you need to click on the textarea again after entering each character

One issue that arises when using TextareaAutosize from MUI is the need to click on the textarea again after entering each character. This problem specifically occurs when utilizing StyledTextarea = styled(TextareaAutosize) The initial code snippet accompl ...

Attempting to eliminate the vertical scroll on my page that matches the height of the navigation bar

I am struggling with the alignment of a login page form that needs to be centered both horizontally and vertically, while allowing for slight scrolling down to accommodate the navigation bar height. I have attempted to adjust the classes and style height ...

CSS Mouse Out Hover Effects with Long Duration

The CSS effect in the codepen below showcases a hover feature where the image grows when hovered over and gradually decreases back to its original size when the mouse is moved away. However, I am looking to change this decrease so that it happens instantly ...

Creating a table with adjustable row heights is a great way to enhance the user

Can the height of an HTML table row be adjusted dynamically by dragging and dropping, similar to how it's done in this demo (https://reactdatagrid.io/docs/row-resize), but for free? ...

Is there a way to align the navigation menu options to the right side of the navbar?

I'm having trouble aligning the options in the navbar to the right side. Can anyone help me identify where I'm going wrong in my code? Here is the snippet I'm working with: <div> <nav class="navbar navbar-expand-lg navb ...

Adding additional text within the paragraph will result in the images shifting backwards when utilizing flexbox

It seems like there might be something obvious that I'm missing here, but essentially my goal is to create a footer with 2 columns and 2 rows. In each column, there will be an icon (32x32) and 2 lines of text next to it. The issue I'm facing is ...

When I zoom in, a different div replaces the original div

I have recently delved into the world of HTML and CSS as I embarked on creating my own website. However, I seem to have hit a snag - when I zoom in on the content, it overlaps with the menu. I have scoured the internet for a solution to no avail, so any as ...

Suitable HTML container for ASP form over HTML table

Can anyone advise on the best HTML container to use for an ASP form that can be styled with CSS instead of an HTML table? For example, consider the following form on an aspx page: <form id="WPF" runat="server"> <asp:Label ID="lblCCode" Text="Cou ...

Incorporate Bootstrap into your Bigcommerce stencil theme for seamless design integration

As a newcomer to BigCommerce's Stencil theme, I am looking for guidance on integrating Bootstrap into the theme for local development. Is it feasible to incorporate custom CSS and JS into the Stencil theme as well? ...

"Reduce the height and adjust the row spacing of the Vuetify form for a more

I'm currently working on creating a form using vuetify that closely resembles the one shown in this image: https://i.sstatic.net/4h6YM.png After experimenting with vuetify grid and columns, I've managed to achieve something similar to this: http ...

What is the best way to implement a switch that can simultaneously display both the on and off positions?

I need help customizing a toggle switch element in CSS. I want the first row to display as on (blue color) and the second and third rows to be displayed as off or grey. So far, my attempts to modify the CSS code have been unsuccessful. .switch { posi ...

What is the best way to insert a triangle shape to the bottom of a div with an opacity level set at 0.2

https://i.stack.imgur.com/sqZpM.png I've been trying to create something similar, but my triangle keeps overlapping with the background in the next section. I've already spent 3 hours on it. Any help would be greatly appreciated. Check out my c ...

Answer for background picture when reducing magnification

Currently, I am facing the challenge of converting a PSD template to HTML. Specifically, I need guidance on how to handle the background food images (highlighted in red in the image) when zooming out the browser. The total width is 1300px with a container ...

How can I make the background of a button change when I move my cursor over it

Is it possible to change the background image of a button when hovering over it? Perhaps have the image transition from left to right for a fading effect? Can this be accomplished? ...

Scroll bars on JQuery UI dialog

When using the jquery UI Dialog modal, everything appears correctly in Firefox and Chrome. However, in IE8, scroll bars suddenly appear. Is there a way to remove them? ...

Error message encountered: "Element not located- Capybara unable to find element despite its existence

I’m currently in the process of writing a selenium test using capybara, and I’ve encountered an issue when trying to populate a pop-up box. Specifically, I am unable to input the element’s name using the fill_in method in capybara. Strangely, this me ...