Expand the width of list elements using CSS

Learning the ropes of CSS, I am currently working on a project to divide the screen into two parts and position text on the left and right sides. Strangely, the text on the right side doesn't span the entire width of the screen, only about 200-300 px...

Here is the JSFiddle link for reference: https://jsfiddle.net/19mw8hzL/

The black text should extend all the way to the right edge of the screen.

<div class="wrapper">
  <div id="one">
    <p class="w-text-1">Strategy</p>
  </div>
  <div id="two">
    <ul>
      <li><a href="#">Visioning</a></li>
      <li><a href="#">Strategic Analysis</a></li>
      <li><a href="#">Strategy Formulation</a></li>
      <li><a href="#">Business Model Innovation</a></li>
      <li><a href="#">Financial Modeling</a></li>
     </ul>
  </div>
</div>
css

Answer №1

Utilize Flexbox for this purpose.

.w-text-1 {
  font-family: 'Garamond', serif;
  color: rgba(26, 161, 95, 1);
  font-size: 40px;
}
.wrapper {
  display: flex;
}
.wrapper div {
  color: #000;
}
#one {
  width: 25%;
}
#two {
  flex: 1;
  background: lightsalmon;
  text-align: center;
}
#two a {
  text-decoration: underline;
  font-family: 'Helvetica Neue', sans-serif;
  font-size: 20px;
  color: #333;
  border: 2px solid black;
}
#two ul {
  overflow: auto;
  padding: 0;
}
#two li {
  display: inline-block;
  margin: 10px;
}
<div class="wrapper">
  <div id="one">
    <p class="w-text-1">Planning</p>
  </div>
  <div id="two">
    <ul>
      <li><a href="#">Budgeting</a>
      </li>
      <li><a href="#">Forecasting</a>
      </li>
      <li><a href="#">Risk Management</a>
      </li>
      <li><a href="#">Performance Measurement</a>
      </li>
      <li><a href="#">Resource Allocation</a>
      </li>
    </ul>
  </div>
</div>

Answer №2

Modify the CSS of #two by incorporating 20% of #one to achieve a total of 100% width:

#two {
    float: left;
    overflow: hidden;
    width: 76%; /* this completes the width with a 4% padding */
    padding-top: 17px;
    padding-right: 4%;
}

Answer №3

Hello, could you please adjust the following:

Set the parent element to 100% width and each child div to be 50%

.container { 
   width : 100%;
}

#first {
  float:left; 
  width:50%;
}

Change the width to 46% considering the right padding is set as 4%, hence (46+4 = 50)

#second { 
  float: right;
  width: 46%; 
  padding-top: 17px;
  padding-right: 4%;
}

:)

Answer №4

*{
  box-sizing: border-box;
}

By utilizing the universal selector, padding will not be included in the width calculation for all elements. However, it's important to note that using '*' as a selector can have a significant impact on the DOM performance.

#two {
  width: 80%;
}

The total width of element #two is set to 80% in order to complement the remaining 20% and create a full 100% width display.

#two li {
    display: inline-block;
}

Each list item within #two will now have a specific width and height due to the application of inline-block display property.

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

What is the best way to modify the color of a button within an AngularJS function by utilizing the same button?

Currently, I have a function assigned to the ng-click event on a button in order to filter a list. My goal is to change the color of the button once it has been clicked and the filtered list is displayed. I am looking for a way to achieve this within the ...

htmlcssangularjs

Floating image along with accompanying text; CSS styles have not been incorporated

As I work on developing my web application and utilize a bootstrap template, I encountered a situation where I needed to include an inline image with text, with the image floating to the left and the text positioned to the right. The paragraph element in ...

htmlcss

Slide in the Toggle Effect to Your Navigation Menu

Seeking help with enhancing my jQuery dropdown menu to include a slide down toggle effect similar to this example: http://jsfiddle.net/LaSsr/188/. Any assistance in applying this slide effect to the following JSfiddle would be greatly appreciated. Thank yo ...

javascriptjqueryhtmlcss

Margins and borders with a negative impact

I have a collection of images that I am trying to stack using negative margins. However, because stacking them without defined boundaries can lead to visual confusion, I thought about adding borders around each image. Surprisingly, while the images are sta ...

csscross-browsermargin

The alignment of the Div element is incorrect following a fixed video in bootstrap

When I place a div after the video, the div appears on top of the video instead of after it. Additionally, when I change min-width: 100% to width: 100%, the content appears before the video when I resize the browser. body{ font-family: 'Mina', ...

javascriptcsshtmltwitter-bootstrap-3

Have you ever created a CSS class that you've had to reuse multiple times?

They always told me to consolidate repeated properties in CSS into one rule, like the example below (please forgive the poor example). I typically see this: .button, .list, .items { color: #444; } Having multiple rules like this can create a lot of clut ...

css

Tips on eliminating excess white space or margins beneath a flexible video player

My issue is with a video and some content underneath. When I reduce the height of the video on mobile, there is too much white space below it. @media only screen and (max-width: 600px) { video { height: 80%; } Instead of adding margin-bottom ...

htmlcssvideomobileresponsive

tips for aligning text to the right of an image

For my college project, I am working on a website. However, I have encountered an issue with using a jsp script to display products in a specific way on the webpage. The problem is that I cannot control where the information about price, name, and descript ...

htmlcss

Troubleshooting issue: Bootstrap 4 Card trimming absolute content within div

Having trouble adding a rounded icon to the top center of a card, but part of the icon is getting cut off. Any suggestions? .header-icon-round { width: 60px; height: 60px; border-radius: 30px; font-size: 30px; background-color: #fff; ...

csstwitter-bootstraptwitter-bootstrap-4

Customize CKEditor by automatically changing the font family when the page is loaded

How can I change the font-family of CKEditor to Meiryo based on a JavaScript boolean? I attempted this code in my custom JS within an if condition, but it did not successfully change the font-family: config.font_style = { element : 'span&apo ...

javascripthtmlcssfontsckeditor

Display user input within a modal dialogue box

I have a subscription form that requires users to enter their name and email address. After clicking on "Compete Now," a pop-up appears asking for workshop information and postal code. The form is functioning correctly as intended. However, I want the em ...

javascripthtmlcsstwitter-bootstrap

Column Alignment Problem in Bootstrap

I'm currently working on a blog template project that resembles the design of this particular page However, I've encountered an issue with aligning the grids in a way that meets my requirements. To showcase my problem, I have shared my version o ...

htmlcssresponsive-designbootstrap-4web-frontend

Eliminate CSS property with Jquery

I have found that most solutions only remove the attribute setting rather than removing the attribute entirely. My goal is to switch the positioning of an element from absolute to fixed. In order to position the element correctly within its parent DIV, I ...

jquerycss

Expert tips for adding spacing between images in carousel sliders and eliminating glitches during slides

After creating a carousel following the guidance of this source and initially sharing it on this platform, I encountered an issue with the padding on the first image. As a solution, I removed the padding from the first image, but this caused the image to b ...

jqueryhtmlcsstwitter-bootstrapbootstrap-4

The footer looks off-center when zooming in or out

I'm currently facing an issue with the footer on a website. When viewing it at 100% size (normal size), the footer appears aligned perfectly. However, upon resizing it, the alignment is lost and it shifts to the left instead of staying centered. Scr ...

htmlcss

What's the best way to vertically center a div with a 100% width and a set padding-bottom on the screen?

I am struggling with positioning the following div on my webpage. .div { width:100%; padding-bottom:20%; background-color:blue; } <div class="div"></div> I have been searching for a solution to vertically center this responsive div on my web ...

javascriptjqueryhtmlcss

Zurb Foundation's sections have a strange issue where navigating between them introduces unexpected whitespace

I'm feeling frustrated as I try to work with Zurb Foundation sections. I've updated to the latest version 4.3.1. Following the documentation provided here: but encountering strange behavior while navigating through results. Refer to the screen ...

javascripthtmlcsszurb-foundation

JavaScript Birthday Verification: Regular Expression Pattern

I am currently testing out JavaScript form validation. The information provided is not being sent to any database, it's just for format testing purposes. All the regex checks are functioning correctly apart from birth. It seems like there may be an i ...

javascripthtmlcssregex

Enhance your UI experience with a beautifully styled button using Material-

I was using a Material UI button with a purple background. <Button component={Link} to={link} style={{ background: '#6c74cc', borderRadius: 3, border: 0, color: 'white', heig ...

javascriptcssreactjstypescriptstyled-components

How to get rid of the outline border in MUI React when an element

I've been experimenting with placing 2 MUI inputs under the same label to create a custom field. I managed to find a solution by grouping the fields in another TextField container, but this seems to be affecting the borders in a way that I don't ...

cssreactjsmaterial-uistylingform-fields