I am facing issues with the CSS inline display property and unable to get it to

I am having trouble aligning the section element in a row using the display: inline-block; property. Here is what I have tried:

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

Despite my efforts, I can't seem to get it to work as expected. Below are snippets of both my HTML and CSS code:

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

Any advice or guidance on how to achieve the desired alignment would be greatly appreciated.

body {
background-color: #edeff2;
margin: 25px;
}

header {
margin-top: 15px;
padding-bottom: 8px;
padding-top: 8px;
background-color: #b8babc;
text-align: center;
 color: #111; font-family: 'Helvetica Neue', sans-serif; font-size: 18px; font-weight: bold; letter-spacing: -1px; line-height: 1; text-align: center;
/*I copied the above style from https://wdexplorer.com/20-examples-beautiful-css-typography-design/ */
}

nav {
padding-bottom: 5px;
}

a {
text-decoration: none;
}

a:hover {
border: 1px solid;
}

h2 {
color: #111; font-family: 'Helvetica Neue', sans-serif; font-size: 20px; font-weight: bold; letter-spacing: -1px; line-height: 1;

}

section {
display: inline-block;
padding-top: 30px;
padding-bottom: 30px;
float: left;
margin-right: 2%;
}

ul {
  list-style-type: none;
}

progress {
  color: #5ff4ef;
  font-size: .7em;
  line-height: 1.5em;
  text-indent: .5em;
  width: 15em;
  height: 1.8em;
  border: 1px solid #5ff4ef;
  background: #5ff4ef;
}

details {
font-size: 1.2em;
color: #028402;
}

details p {
font-style: italic;
}

footer {
background-color: #b8babc;
font-size: 1.2em;
clear: both;
}

img {
width: 105px;
}
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8>
  <title>Colleen</title>
  <!-- ADD a LINK TO YOUR STYLE SHEET HERE!! -->
  <link rel="stylesheet" href="style.css">
</head>

<body>
 <header>
    <h1>ALOK</h1>
  <nav>
    <a href="">One</a>
    <a href="">Two</a>
    <a href="">Three</a>
    <a href="">Four</a>
  </nav>
 </header>
  <section class="half">
    <h2>Favorite Foods</h2>
    <ul>
      <li>Apples</li>
      <li>Pizza</li>
      <li>Crab</li>
      <li>Chocolate Cake</li>
    </ul>
  </section>
  
  <section class="half">
    <h2>Achievements</h2>
      <p>Progress in this course (100%)<progress value = "1"></progress><br/>Progress in the Specialization (20%)<progress max = "5" value = "1"></progress><br/>Progress in life goals (67%)<progress max = "100" value = "67"></progress></p>
  </section>

  <section class = "whole">
    <h2>More About Me</h2>
    <details open><summary>My Childhood</summary>
    <p>I grew up in Bangalore India.  I lived near a Mango Grove and I used to steal a lot of them.<</p></details>
  </section>

   <footer>
    <p><img src = "http://www.intro-webdesign.com/images/newlogo.png" alt = "logo"/> This page was created by your name &amp; Colleen van Lent. To learn more about web design, visit <a href=http://www.intro-webdesign.com">Intro to Web Design</a></p>
  </footer>

</body>

</html>

htmlcss

Answer №1

You should specify a width, such as 30%:

body {
background-color: #edeff2;
margin: 25px;
}

header {
margin-top: 15px;
padding-bottom: 8px;
padding-top: 8px;
background-color: #b8babc;
text-align: center;
 color: #111; font-family: 'Helvetica Neue', sans-serif; font-size: 18px; font-weight: bold; letter-spacing: -1px; line-height: 1; text-align: center;
/*The style above was extracted from https://wdexplorer.com/20-examples-beautiful-css-typography-design/ */
}

nav {
padding-bottom: 5px;
}

a {
text-decoration: none;
}

a:hover {
border: 1px solid;
}

h2 {
color: #111; font-family: 'Helvetica Neue', sans-serif; font-size: 20px; font-weight: bold; letter-spacing: -1px; line-height: 1;

}

section {
display: inline-block;
  width: 30%;
padding-top: 30px;
padding-bottom: 30px;
float: left;
margin-right: 2%;
}

ul {
  list-style-type: none;
}

progress {
  color: #5ff4ef;
  font-size: .7em;
  line-height: 1.5em;
  text-indent: .5em;
  width: 15em;
  height: 1.8em;
  border: 1px solid #5ff4ef;
  background: #5ff4ef;
}

details {
font-size: 1.2em;
color: #028402;
}

details p {
font-style: italic;
}

footer {
background-color: #b8babc;
font-size: 1.2em;
clear: both;
}

img {
width: 105px;
}
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Colleen</title>
  <!-- ADD a LINK TO YOUR STYLE SHEET HERE!! -->
  <link rel="stylesheet" href="style.css">
</head>

<body>
 <header>
    <h1>ALOK</h1>
  <nav>
    <a href = "">One</a>
    <a href = "">Two</a>
    <a href = "">Three</a>
    <a href = "">Four</a>
  </nav>
 </header>
  <section class="half">
    <h2>Favorite Foods</h2>
    <ul>
      <li>Apples</li>
      <li>Pizza</li>
      <li>Crab</li>
      <li>Chocolate Cake</li>
    </ul>
  </section>
  
  <section class="half">
    <h2>Achievements</h2>
      <p>Progress in this course (100%)</100%><progress value = "1"></progress><br/>Progress in the Specialization (20%) <progress max = "5" value = "1"></progress><br/>Progress in life goals (67%)<progress max = "100" value = "67"></progress></p>
  </section>

  <section class = "whole">
    <h2>More About Me</h2>
    <details open><summary>My Childhood</summary>
    <p>I grew up in Bangalore India.  I lived near a Mango Grove and I used to steal a lot of them. </details>
  </section>

   <footer>
    <p><img src = "http://www.intro-webdesign.com/images/newlogo.png" alt = "logo"/> This page was created by your name &amp; Colleen van Lent.   To learn more about web design, visit <a href="http://www.intro-webdesign.com">Intro to Web Design</a>.</p>
  </footer>

</body>

</html>

Answer №2

Your HTML and CSS code for the section tag has been updated to ensure functionality.

section.half {
display: inline-block;
padding-top: 30px;
padding-bottom: 30px;
float: left;
margin-right: 2%;
}

ul {
  list-style-type: none;
}
  <section class="half">
    <h2>Favorite Foods</h2>
    <ul>
      <li>Apples</li>
      <li>Pizza</li>
      <li>Crab</li>
      <li>Chocolate Cake</li>
    </ul>
  </section>
  
  <section class="half">
    <h2>Achievements</h2>
      <p>Progress in this course (100%)<progress value = "1"></progress><br/>Progress in the Specialization (20%) <progress max = "5" value = "1"></progress><br/>Progress in life goals (67%)<progress max = "100" value = "67"></progress></p>
  </section>

  <section class = " half whole">
    <h2>More About Me</h2>
    <details open><summary>My Childhood</summary>
    <p>I grew up in Bangalore India.  I lived near a Mango Grove and I used to steal a lot of them. </details>
  </section>

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

Placing two parent flex containers on top of each other

I'm in a situation where I have two .container elements, both set at a height of 50%. Within these containers are the child divs .element, which belong to their respective parent divs .container. The problem arises when applying media queries with f ...

htmlcss

When the next button is clicked, the button content disappears

I am struggling with a problem involving two buttons that store tables. The issue is, I want the table to disappear when the second button is clicked and show the contents of the second button immediately after clicking it once, rather than having to click ...

javascripthtmlcssbuttonsvg

Leveraging Global SCSS Variables in Next.JS with SASS

In my Next.js Application, I have a global CSS file named main.scss imported in the pages/_app.js file. _app.js import '../global-styles/main.scss' export default function MyApp({ Component, pageProps }) { return <Component {...pageProps} ...

cssreactjssassnext.js

Change the icon switch from fas fa-lock-open to fas fa-lock by adding an event listener for a click action

let lockIcon = document.createElement("i"); lockIcon.setAttribute("class", "fas fa-lock-open"); lockIcon.setAttribute("id", color + "lock"); Is there a way to toggle between the icons fas fa-lock-open and fas fa-lock when clicking using a ...

javascripthtmlweb-frontend

Incorporate a button within the input field

Looking to customize my search form with the search button on the right side, similar to this: https://i.sstatic.net/lwmig.png Below is the code for my current form setup: <form action="search.php" method="post" class="index-search-form"> ...

htmlforms

Divide the Javascript code from the HTML Canvas

I have been diving into HTML5 Canvas and exploring how to implement it using Javascript code. However, I am facing difficulties separating the Javascript code from the original html file. Despite trying some solutions: HTML5 Canvas not working in extern ...

javascripthtmlcanvas

What is the reason that when a <div> click on a mobile device includes a jQuery ('#item').fadeOut() function, the CSS of the '#item' element maintains its previous hover state

While creating a mock back to top button, I encountered an issue with my jQuery call to fadeOut() behaving differently on mobile devices (this discrepancy can be observed using any desktop browser simulator). You can find the source code here: https://cod ...

javascriptjqueryhtmlcssmobile

Deleting various classes (jQuery)

Is there a more effective alternative to rewriting the following code snippet? $('element').removeClass('class1').removeClass('class2'); I am unable to utilize removeClass(); because it would eliminate ALL classes, and that ...

jquerycss

Animate the transition of an anchor link by adding content on hover

Is there a way to make an icon appear when hovering over an anchor link on a webpage? I tried a code snippet that I thought would achieve the desired effect, but it ended up leaving a gap. The text should expand in size as you hover over the anchor link. ...

htmlcsscss-transitions

Trouble with displaying and hiding elements using multiple Javascript functions

I'm encountering an issue with a JavaScript function - when I implement the first paragraph on its own, it works as expected. However, when I introduce and execute the second paragraph, the show and hide function for "ABOUT THE PROJECT" toggles the te ...

javascripthtml

Top method for centering a flexible SVG vertically once the page width becomes too narrow

Currently, I have two SVG images displayed side by side on a webpage. One SVG needs to maintain a fixed size while the other should scale as needed, and I have achieved this functionality. However, I am facing an issue where I want the two SVGs to align v ...

javascriptjqueryhtmlcss

Here is a basic example of an HTML image tag with the crossorigin attribute set to "use-credentials

I duplicated the http server using: git duplicate https://github.com/http-party/http-server Within a command prompt, I ran the following command: node ./bin/http-server --username test --password image --cors The http server is currently active at http:/ ...

htmlnode.jsimagecors

Is it possible to choose only half of the elements using the :nth-child selector in

Consider this code snippet: <ul> <li>Hello Universe</li> <li>Hello Universe</li> <li>Hello Universe</li> <li>Hello Universe</li> </ul> Can we select exactly half of the total elements by ...

htmlcsscss-selectors

What is the best way to keep tab content fixed when switching?

I've successfully implemented tab switching, but I need to make the content fixed. How can I achieve this so that no matter the length of the content, it remains fixed in its position when switching tabs? The current issue is that when the content is ...

javascriptjqueryhtmlcss

Having trouble with a basic select tag and options not functioning properly in Chrome browser

I encountered an issue where I am unable to expand a simple select tag in Chrome. <select id="filterCategory" class=""> <option>1</option> <option>2</option> <option>3</option> <option>4</option ...

javascripthtmlcssgoogle-chrome

Issues with Linear-Gradient functionality in NativeScript 8 on Android devices

I recently added a linear-gradient to an image in my NativeScript 8 app. Surprisingly, it seems to work perfectly on iOS, but I'm encountering some issues on Android. Despite trying solutions like using -webkit-linear-gradient(), the desired effect is ...

androidcssangularnativescript

Loading content dynamically into a div from an external or internal source can greatly enhance user experience on a website. By

As I work on my website, I am incorporating a div structure as shown below: <div class="container"> <div class="one-third column"> <a id="tab1" href="inc/tab1.html"><h2>tab1</h2></a> </div> & ...

javascriptjquerycsshtml

Programming in Python often involves utilizing a combination of powerful libraries such as BeautifulSoup,

I am currently developing a program that is designed to extract emails and collect specific links from them, particularly those from Newegg. I have successfully used iMAP to log in and access the HTML content of the emails. However, I am encountering an is ...

pythonhtmlbeautifulsouppython-requestsimap

Error: The WebGL function enablevertexattribarray has an index that is outside the valid range

Take a look at the vertex and fragment shaders I've written: <script id="shader-fs" type="x-shader/x-fragment"> precision mediump float; uniform sampler2D uSampler; varying vec4 vColor; varying vec2 vTextur ...

htmlopengl-eswebgl

Adjust the size of h1 headings to be smaller than 768px within the

My goal is to have an h1 header within a row, with font awesome mark quotes displayed on the left and right. I am attempting to resize it once the screen width goes below 768px. Here's what I have so far: @media screen and (max-width: 768px) { h1 ...

twitter-bootstrapcss