Ensuring Padding and Border Enhancements without Disrupting the Design Structure

I have a layout featuring three columns, each with unique dimensions:

Left Column: 240px; Middle Column: 360px; Right Column: 360px. The overall layout is contained within a 960px wrapper.

To create this layout, I utilized float properties and inserted some temporary text. I decided to include a 10px right margin and a 1px solid border around all columns, which required me to reduce each column's width by 11px. In order to add a 5px padding, I applied it to the 'p' and 'h' elements rather than the div itself, a technique I learned from Adobe DreamWeaver's built-in 3 column layout.

While this layout functions perfectly for fixed widths, I am uncertain about how to handle margin, border, and padding for a liquid/fluid layout. Since I am using float:left to position the columns, I am unsure how to add these elements without disrupting the overall design. Any advice on implementing these features in a liquid layout would be greatly appreciated!

csslayoutbordermarginpadding

Answer №1

Here's a neat little tip to include padding and border (but not margin) without disrupting the CSS width.

-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;

Answer №2

To achieve a design with a width of 960px, adjust the width to 240px according to the following CSS:

#wrapper{
    width:960px;
}
.left{
    width:240px;
    padding:5px;
    float:left;
    border:1px solid black;
    margin:0 0 0 10px;
}
.middle{
    width:360px;
    padding:5px;
    float:left;
    border:1px solid black;
    margin:0 0 0 10px;
}
.right{
    width:240px;
    padding:5px;
    float:left;
    border:1px solid black;
    margin:0 0 0 10px;
}

Use the following HTML structure:

<div id="wrapper">
    <div class="left">left</div>
    <div class="middle">middle</div>
    <div class="right">right</div>
</div>

Answer №3

If you desire a liquid or fluid design, you can achieve it by using the following code.

HTML

<div id="wrapper">
    <div class="wrapper-in">
        <div class="left">left</div>
        <div class="middle">middle</div>
        <div class="right">right</div>
    </div>
</div>

CSS

#wrapper{width:100%;}
.wrapper-in{width:1000px;}
.left{ width:218px; padding:5px; float:left; border:1px solid black; margin:0px 10px 0px 0px;}
.middle{width:338px; padding:5px; float:left; border:1px solid black; margin:0px 10px 0px 0px;}
.right{width:338px;padding:5px; float:left; border:1px solid black; margin:0px 10px 0px 0px;}

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

Hide the scrollbars on the sidebar

I'm attempting to recreate a sleek scrollbar that caught my eye on the website . To achieve this, I need to have a screen larger than 955px in order to display the sidebar. However, when my sidebar overflows in the y direction, it causes an additional ...

javascriptcssreactjs

fa-arrow-circle-o-down and fa-arrow-circle-down

Is it possible to modify the fa-arrow-circle-o-down icon to have the same arrow type as the fa-arrow-circle-down icon? The current arrows on these two icons are different and I want them to be consistent. ...

htmlcssfontsfont-awesomefont-awesome-4

The background image is failing to adapt to mobile devices

It seems like I might be overlooking something simple, but I have 4 sections, each with a background image similar to this one and appearing one after the other: .bg { background-image: url("../images/bg1.jpg"); position: absolute; to ...

htmlcssposition

Shift the "Login link" to the right side of the Bootstrap navbar

Currently working on a Django website and incorporating Bootstrap/CSS/HTML to enhance the design. I've set up a navbar menu and want the login tab on the right side. However, despite my attempts, I'm not achieving the desired outcome: The HTML ...

htmlcssdjangotwitter-bootstrapnavbar

Utilizing vue-router to create two separate navigation bars where only one link is highlighted as active

In my setup, I have implemented two sections with navigation structured as follows: <ul class="navigation-list"> <li v-for="(route, index) in navRoutes"> <router-link :to="route.path"> <span>{{ route.name }}</span> ...

javascriptcssvue.jsvue-router

The issue with the max-height transition not functioning properly arises when there are dynamic changes to the max-height

document.querySelectorAll('.sidebarCategory').forEach(el =>{ el.addEventListener('click', e =>{ let sub = el.nextElementSibling if(sub.style.maxHeight){ el.classList.remove('opened&apos ...

javascriptcsscss-transitions

When one div is hidden, the width of another div will automatically adjust to 100%

Is there a way to make #leftdiv expand to 100% when #rightdiv is hidden, and have both <div>s positioned next to each other when a button is clicked? I have successfully aligned both <div>s next to each other upon button click, but I would lik ...

javascripthtmlcss

A `div` element with a height set to 100%, preventing the content from being scrollable

I've been struggling to make my content area (height:100%) scrollable, but have had no success. Despite trying various solutions, nothing seems to work. I'm using devextreme from DevExpress, but it shouldn't affect the CSS. I've set up ...

htmlcssdevexpressdevextreme

Skewed top-left border surrounds the element with a dashed design

I'm looking to achieve a border effect similar to the one shown in the image linked below: https://i.sstatic.net/a4hCQ.jpg Here is the code I have tried so far: <p>Some Text</p> p{ -webkit-transform: perspective(158px) rotateX(338deg ...

htmlcssbordercss-shapes

Issue with concealing floated elements within a container div

I am currently facing an issue with trying to hide floated divs within a parent div, but unfortunately my code is not working as expected. Here is the code snippet: div.scrollarea { overflow: scroll; width: 400px; ...

htmlcss

What is the best way to animate an element to slide down when it is hidden with

I'm working on an html tag called "loginBox" (<loginBox> ... </loginBox>) that is initially hidden with display:none. When a user selects an option, I want it to smoothly slide down instead of just appearing and disappearing. How can I ach ...

javascriptjqueryhtmlcss

Exploring the possibilities of customizing gutters in Bootstrap v4 Beta

Is it possible to customize grid gutters at different breakpoints? I am aware that Twitter invested millions of dollars in perfecting Bootstrap v4, and I don't expect to overhaul everything overnight. However, I am curious if there is a way to create ...

csstwitter-bootstrapsassbootstrap-4

Interacting with the column tags within HTML tables through the .NET WebControls Table in a programmatic way

As per the information provided on this website: The HTML5 table contains col tags... <table width="100%"> <col style="width:40%"> <col style="width:30%"> <col style="width:30%"> <tbody> ...

css.netasp.net-mvchtml

Is there a way to recycle an image and ensure that the web browser only needs to download it once?

Is there a way to effectively reuse the same image multiple times on my website without inefficiently downloading it each time? ...

phpjavascripthtmlcssimage

Arranging Elements Using CSS

Currently, I am working on aligning and positioning my items using CSS. However, I'm a bit confused about the right approach. Here is a demo of my current progress: Demo Link I aim to achieve a layout similar to this sketch: Sketch Image Apologies ...

jqueryhtmlcss

Tips for setting an image as the background on various mobile screen sizes

Is there a way to set an image as a background that will work effectively with multiple different mobile screen resolutions without distorting or cropping the image? For example, if I want the image to display correctly on both iPhone4 and iPhone6 without ...

htmlcssimage

What is the method to execute jQuery code after the completion of a fade out effect?

I am attempting to fade out a div upon click while also adjusting some CSS properties. The problem I am encountering is that the CSS properties change during the fade out transition, instead of after it has completed. I would like the values to change onc ...

javascriptjquerycss

Transitioning with an ellipsis

Currently, I am working on a project where I am trying to utilize the CSS property text-overflow: ellipsis to achieve a specific animation. However, despite applying this property along with white-space: nowrap and overflow: hidden to .card-dish__info, I a ...

htmlcssoverflowellipsis

Embedded tweets may occasionally lose their borders when viewed on various web browsers

My goal is to showcase a collection of responsive embedded tweets in rows of 2. Here are the key elements of the code that have enabled me to achieve this: HTML <div id="tweets"></div> <script src="https://platform.twitter.com/widgets.js" ...

javascripthtmlcsstwitter

Always keep your phone in landscape orientation for optimal website viewing

Currently, I am facing an issue with my website where it functions perfectly on mobile devices in landscape orientation but elements get distorted when viewed in portrait mode. Is there a method to ensure that the website is always displayed in landscape ...

javascriptjqueryhtmlcssviewport