Creating column gaps that remain consistent when resizing a webpage is essential for maintaining a clean and organized layout

Visit my current site

[This is the HTML code for my website:][2]

<div class="column-box" style="width: 100%"></div>

<div id="column1" style="float:left; margin:15; width:33%;">

 <p>Sara Adams<br>
I am a Web Developer and Content Creator with a passion for user experience design.
    </p>   
</div>

<div id="column2" style="float:left; margin:15;width:33%;">
  <p>EXPERIENCE<br>

and so on...

I attempted to add margin and padding through CSS, but it didn't have any effect 

.column1 {
padding: 50px !important;
}

Is there an alternative approach that would achieve the same result more effectively? I want to keep the text within their designated columns.

Any assistance would be greatly appreciated

htmlcss

Answer №1

Your "column1" should be represented as an id in the CSS like this: #column1

If you prefer to use a class, add something like class="column" to your divs and then apply CSS to .column

The inline styles are not working for the margins because the value should be specified with units such as 15px instead of just 15

.column {
  float: left;
  width: 33.33%;
  padding: 30px;
  box-sizing: border-box;
}
<div class="container">
  <div class="column">col1 col1 col1 col1 col1 col1 col1 col1 col1 col1 col1 col1 col1 col1 col1 col1 col1 col1 col1 col1 col1 col1 col1 col1 col1 col1 col1 col1 col1 col1 col1 col1 col1 col1 col1 col1 col1 col1 col1 col1 col1 col1 col1 col1 col1 col1 col1 col1 </div>
  <div class="column">col2</div>
  <div class="column">col3</div>
</div>

Consider using flexbox or grid layouts as alternatives.

Answer №2

Give this a try

*{
  box-sizing: border-box;
}

.parent{
  width: 100%;
}

.child{
  width:33.33%;
  padding: 20px;
  float: left;
}
<div class="parent">
<div class="child">
<h3>Heading</h3>
<p>
Is there an alternative approach to achieving the same layout? I want the text in each column to remain within their respective columns.

Any assistance would be greatly appreciated.
</p>
</div>
<div class="child">
<h3>Heading</h3>
<p>
Is there a different method that could achieve the desired result more effectively? I intend for the text in each column to stay within their designated areas.

Any guidance would be highly valued.
</p>
</div>
<div class="child">
<h3>Heading</h3>
<p>
Is there another way to accomplish this while maintaining the current layout? Ensuring that the text stays within its allocated column is of utmost importance.

Any help would be greatly appreciated.
</p>
</div>
</div>

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

Activate on click using JavaScript

When a link with the class .active is clicked, I want to use a JavaScript function to deactivate any other active links. The structure of the code should be as follows: <ul class="product"> <li><a href="#myanmar" class="active">Mya ...

javascriptjqueryhtmlcssonclick

Styling a specific element in Svelte without needing a globally unique identifier

How can I target just the outer div using a css selector? <div> <div>...</div> <div>...</div> </div> <style> OUTER.DIV.ONLY { background: url(outer.png); } </style> Alternatively, I& ...

csssvelte

Tips for displaying text within an input field labeled "password" and then reverting back to a password display after entering text

I am working with a login form that includes a password field: <input type="password" name="password" id="password" value="Password" maxlength="40" required style="width: 130px; font-size: 10px;" /> Currently, the password field displays "******** ...

javascripthtmlinput-field

What are some effective ways to manage repetitive HTML elements like headers and footers in Angular 4?

Within my Angular web project, I find myself using a variety of different headers on multiple pages. Is there a way to streamline this process by coding the header and footer once and having them automatically included in one or more pages? I am looking ...

htmlasp.net-mvcangularrazor

Design a PHP tool for generating custom CSS frameworks

After attempting to create a CSS frame generator similar to this one, I stumbled upon a solution that works well with one exception. PHP Code: <?php function print_css($parentTag, $prefix, &$dup_checker) { if ($parentTag->nodeName == &apos ...

phphtmlcss

Is there a way to utilize JavaScript in order to trigger a random audio file to play upon clicking?

Is there a way to create a button using the div element that, upon being clicked, plays a random audio file from a set of options? I found some helpful discussions on this topic here and here. Based on those resources, I created a script utilizing Math.ra ...

javascripthtmlrandomplayback

The application is experiencing issues with loading Django's CSS files properly

When working on my Django application, I've noticed that the CSS code being loaded differs from what is written in the files. What could be causing this discrepancy and how can it be fixed? ...

cssdjangodocker

Manipulating CSS styles with jQuery

Trying to update the UL image in the CSS directory using jQuery for a Twitter stream: as tweets are displayed, want to change the avatar of the account associated with each post. Using .css is straightforward, but struggling to modify the URL for the new i ...

javascriptjqueryhtmlcsstwitter

Open the HTML document and access the file contents

I'm having trouble reading a text file from my computer onto a website. It works fine in Internet Explorer, but won't work in Chrome. I don't have much experience with HTML, so any help would be much appreciated! <html> <body> ...

javascripthtmlajaxgoogle-chrome

Incorporate new content into a jquery mobile listview on the fly

I'm attempting to use JavaScript to dynamically populate a listview with items. Here is the code I have written: //Function to load data fields for items dynamically function initialiseFields(listViewId){ for(var i = 0; i < 10; i++){ ...

javascripthtml

Using Sencha Touch: What is the best method for populating an HTML panel with a JSON response?

I've exhausted all possible combinations in my attempts to load a JSON object from the server and use it to render a panel with video and other information. Despite my efforts, I haven't been able to make anything work. What could I be doing inco ...

htmljsonsencha-touchpanel

Incorporating a full-page background into a specific view using AngularJS

In order to implement a fullscreen CSS background for a specific view in my app, I attempted adding a class to the body. However, this approach caused the background to persist in the cache and remain visible when switching views. The challenge arises fro ...

javascriptjquerycssangularjs

Problem with holding a dropdown button

Having trouble maintaining the position of this button within the floating button holder above my website content. How can I incorporate a drop-down menu while ensuring it stays within the same button holder? .btn-holder { backgr ...

css

The striped color override feature in Bootstrap appears to be malfunctioning in Internet Explorer 8

I have come across several discussions regarding this topic with various suggestions. My current objective is to make the alternating rows in Bootstrap (2.3.2) appear darker in Internet Explorer 8. To achieve this, I attempted to override the style by impl ...

cssinternet-explorertwitter-bootstrap

Python Selenium - The Select method can only be used with <select> tags, not <div> tags

Seeking guidance on selecting an element from a dropdown box on a work website using web scraping and selenium. As a newcomer to this technology, I am struggling and looking for some assistance in the right direction. Unlike other scenarios I have come acr ...

pythonhtmlseleniumwebdriver

Tips to prevent the webpage from scrolling to the top when clicking on an anchor with an ID

I have developed a CSS/HTML carousel that consists of 4 slides. The goal is to display the selected slide when clicking on the bottom button (a href). However, I am facing an issue where every time I click on a link, the selected slide appears as intended ...

javascripthtmljquerycss

Materialize.css | managing spaces, indentation, and 'overriding' in a span element

I recently started using a new framework called Materialize CSS for my project and I'm still getting the hang of it. One issue I've encountered is that long texts in my sidebar are creating large spaces between line breaks and strange indents. D ...

jqueryhtmlcssmaterialize

Tips for fading the text of list items when their checkbox is marked as done?

I am trying to figure out how to gray out a list item when its checkbox is checked. The code I currently have takes text input from a textbox and adds it to an unordered list when the add button is clicked. Each list item contains a checkbox within it. My ...

javascripthtmlcss

What is the difference in performance between using element.class { ... } compared to just .class { ... } in CSS?

Is there any impact on performance when specifying div.class or p.class instead of just .class if a certain class will only be used on divs or paragraphs? ...

cssperformanceoptimization

Sorting data in a Footable table by an unfinished line

My data table contains various lines like: 97.5%, 10/30, 41 RPM, 3.6 seconds, $4750, $100 When I set the type data-type = "number" in the rows, everything is stripped except for the numbers. However, I need the output to remain complete as shown in the ex ...

javascripthtmltwitter-bootstraptwitter-bootstrap-3footable