In need of assistance with adding a divider within a box using HTML/CSS

As a beginner, I may have messy code but I'm working on creating a job search page with a bar displaying the results like this:

I've almost got it, except I can't figure out how to add that divider between PREV, 1 to 100, and NEXT. My current setup looks like this:

Take a look at my code:

HTML:

<div class="results">
    <a href="https://gregslist--farahgus10.repl.co/">Prev<a/>
    <a href="https://gregslist--farahgus10.repl.co/" >1 to 100 of 179<a/>
    <a href="https://gregslist--farahgus10.repl.co/" >Next<a/>
  </div>

CSS:

.results {
    color: black;
    border: 1px solid lightgrey;
    width: 300px;
    padding: 5px;
    margin-top: 25px;
    margin-left: 60px;
    margin-bottom: 30px;
}

I attempted to create a results class for each link, but ended up with one large box instead of individual boxes around each link.

htmlcss

Answer №1

.results {
color: black;
border: 1px solid lightgrey;
width: 300px;
margin-top: 25px;
margin-left: 60px;
margin-bottom: 30px;
  display:flex;
}

.results a {
  color:#000;
  text-decoration:none;
  font-family:sans-serif;
}

.a, .c {
  flex:1;
  padding: 5px 0px;
  text-align:center;
}

.b {
  flex:2;
  padding: 5px 0px;
  text-align:center;
  border-right:1px solid lightgray;
  border-left:1px solid lightgray;
}
<div class="results">
    <div class="a"><a href="https://customlink--example.repl.co/">&lt; Previous<a/></div>
   <div class="b"> <a href="https://customlink--example.repl.co/" >1 to 100 of 179<a/></div>
   <div class="c"> <a href="https://customlink--example.repl.co/" >Next ><a/></div>
  </div>

Answer №2

You might consider presenting this information in a simple table format. It should suffice for your requirements.

Here is an example illustrated on JSFiddle

<table>
<tr>
  <td>
    <a href="https://gregslist--farahgus10.repl.co/">Prev</a>
  </td>
  <td>
    <a href="https://gregslist--farahgus10.repl.co/" >1 to 100 of 17</a>
  </td>
  <td>
    <a href="https://gregslist--farahgus10.repl.co/" >Next</a>
  </td>
</tr>
</table>

Apply CSS styling similar to this:

.results {
color: black;
border: 1px solid lightgrey;
width: 300px;
padding: 5px;
margin-top: 25px;
margin-left: 60px;
margin-bottom: 30px;
}

table {
  border-collapse: collapse;
}

td {
  border: 1px solid gray;
}

Answer №3

Your situation is quite straightforward, no need for any fancy flexbox techniques.

.results {
  color: black;
  border: 1px solid lightgrey;
  /* width: 300px; removed */
  display: inline-block;  /* Added */
  /* padding:5px; moved to the children (<a>) */
  margin-top: 25px;
  margin-left: 60px;
  margin-bottom: 30px;
}


/* Added */
a {
  display: inline-block;
  padding: 5px;
  text-decoration: none;
}


/* applying left and right border to second child to simulate dividers */

.results>a:nth-child(2) {
  border-right: 1px solid lightgrey;
  border-left: 1px solid lightgrey;
}
<div class="results">
  <a href="https://gregslist--farahgus10.repl.co/">Prev</a>
  <a href="https://gregslist--farahgus10.repl.co/">1 to 100 of 179</a>
  <a href="https://gregslist--farahgus10.repl.co/">Next</a>
</div>

Answer №4

It appears that the closing tags on your <a> links are incorrect. The correct format should include a slash before the letter "a", like so: </a>. Once you make this adjustment, you can place each of the <a> links into their own individual divs:

HTML:

<div id="container">
  <div><a href="https://gregslist--farahgus10.repl.co/">Prev</a></div>
  <div><a href="https://gregslist--farahgus10.repl.co/">1 to 100 of 179</a></div>
  <div><a href="https://gregslist--farahgus10.repl.co/">Next</a></div>
</div>

CSS:

div {
  float: left;
}

#container {
  border: 1px solid lightgrey;
}

#container div {
  padding: 8px 24px;
  border-right: 1px solid lightgrey;
}

#container div:last-child {
  border-right: none;
}

Answer №5

There are multiple crucial factors to consider:

  1. Your elements were not properly closed.
  2. You should provide more specific details on which elements the CSS should be applied to.

These are just a few key points, but further CSS information is necessary for success.

.results {
  display: flex;
  width: 100%;
  padding: 5px;
}

.results a {
  max-width: 300px;
  min-width: 150px;
  color: black;
  text-decoration: none;
  border: 1px solid lightgrey;
  padding: 8px;
  text-align: center;
}
<div class="results">
    <a href="#">Prev</a>
    <a href="#" >1 to 100 of 179</a>
    <a href="#" >Next</a>
  </div>

<div class="results">
    <a href="https://example.com/">Prev<a/>
    <a href="https://example.com/" >1 to 100 of 179<a/>
    <a href="https://example.com/" >Next<a/>
</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

Utilizing float positioning in Responsive Web Design

Attempting to implement a two-column float CSS layout with specific width percentages. My CSS styles for the two columns are as follows: .div1 { width: 25%; float: left; } .div2 { width: 75%; float: right; } .container { width: 960px; } @media scr ...

cssresponsive-design

What is the best method for transforming an HTML file into an ICS (iCal) file?

Hello there! I am interested in converting an HTML file (website) to an iCalendar file (iCal). Is this even possible? If so, how can it be achieved? Does anyone have any ideas or recommendations on how to proceed? Thank you in advance! ...

htmlconvertersicalendarrfc5545

Retrieve the targeted row from the table and then employ a function

Here is a datatable that I am working on: http://jsbin.com/OJAnaji/15/edit I initially populate the table with data and display it. Then, I add a new column called "kontrole." data = google.visualization.arrayToDataTable([ ['Name', &apo ...

javascriptjqueryhtmlgoogle-visualization

Show side by side using javascript

My dilemma lies in having a set of cards that are meant to be displayed inline, but I have to initially hide them using "display: none". When a specific button is clicked, I aim to reveal these cards; however, upon doing so, each card seems to occupy its o ...

javascriptcssbootstrap-4

The functionality of $(selector).css() seems to be malfunctioning

I currently have an html div element stored in a variable var rows = ""; rows += "<div>1111 : Hi there</div>"; Despite multiple attempts, I have failed to add a background color to this div using the following methods: 1. $(rows).css({&apos ...

javascriptphpjqueryhtmlajax

Designing a card flip animation featuring front and back faces without using absolute positioning

Looking to enhance my website with a new feature that incorporates the card-flipper schema found on David Walsh's site: https://davidwalsh.name/css-flip. The challenge arises from the fact that the content within my cards is dynamic, making the height ...

htmlcsscss-positioncss-transforms

Retrieve the value of a CSS class property regardless of whether it is actively being utilized

I am facing a dilemma where I need to determine the value of the 'width' property for a css class named 'foo' (example: ".foo { width:200px}" ). However, there may not be an element with this class in the dom yet. My goal is to retrie ...

javascriptcss

The cascading menu causes interference with the function of other elements in the

I am currently designing a navigation bar that includes a drop-down menu (with plans to add another one in the future). The issue I'm facing is that when the user clicks on the drop-down menu, it shifts all of the navigation links to the right. What I ...

javascriptjquerycss

Determining the file path in HTML5

Can anyone help me with retrieving the file path using html5 javascript once a user selects a file? I require the file path for a specific scenario: In this case, the user uploads a file and pauses it (currently only supported by Mozilla browsers), then c ...

phpjavascripthtml

I'm experiencing an issue where the video from my server is not being displayed within the <video> tag in the browser, but when using the web URL, the video plays

When it comes to uploading a video, there are two options available: 1) Provide the web URL for the video, 2) Upload the actual video file. The <video> tag works smoothly with a web URL as the source, but issues may arise when trying to play an uplo ...

javahtmlweb-servicesmime-typeswildfly-9

Ways to conceal #div element from displaying in the href attribute within the anchor tag

My anchor tag has an href attribute that looks like this: <a onclick='loadReview(\"" + strexternalURL + "\");' href='#productName1'. When clicking on it, the URL appears as http://localhost:54986/Dealerlist.aspx#productName ...

javascriptjqueryhtmlasp.netcss

What is the best way to create an answer label box that validates your response?

I am looking to design a question box label that resembles a search box. In this unique setup, users will have the option to input their answer into the question label. For example, if the user types 'kfuffle' as the answer, they will automatical ...

javascripthtml

The jQuery UI Sortable functions are being triggered at lightning speed

I am currently working on a project where users can create a seating chart, add rows and tables, and move the tables between different rows. The functionality for adding rows and moving tables already exists in the code. However, I am facing an issue where ...

javascriptjqueryhtmlcssjquery-ui

On mobile devices, the alignment of text in Bootstrap doesn't appear as intended

I'm creating a portfolio website for showcasing my design projects from university. The text in the "my work" section is centered, but it seems misaligned with other elements like buttons when the window width is reduced. What could be the issue? Cod ...

javascripthtmlcsstwitter-bootstrapbootstrap-5

Learn how to style inline HTML elements, such as headings, labels, input fields, and buttons, which are typically displayed as block elements

Title. For my dictionary chrome extension, I am looking to inline a label, input field, and button all in one line. This is what I want to achieve: Define:[ INPUT ] DEFINE The brackets represent the input field and "DEFINE" is the ...

htmlcsslayoutinputgoogle-chrome-extension

Navigating a Bootstrap carousel with buttons: A step-by-step guide

Here is the code snippet I am currently working with: <!DOCTYPE html> <html> <head> <script src="https://code.jquery.com/jquery-2.1.4.js"></script> <link href="https://code.jquery.com/ui/1.11.4/them ...

jqueryhtmlcsstwitter-bootstrap

Slideshow featuring cards with text overlay

I am working with a bootstrap carousel and trying to place a card with text on top of it. No matter what I try, the card is not appearing as desired. Here is an example of what I want to achieve: https://i.sstatic.net/tjW3w.png Below is the code snippet: ...

htmlcsstwitter-bootstrapbootstrap-4

Ensuring a div remains perfectly centered

Currently, I am new to HTML and still in the process of learning. I am facing a challenge in centering a button within a div, and I have been using margins to position it. While this method works well when the window is fullscreen, the button's positi ...

htmlcssbutton

The primary container is brimming with an abundance of content

Can anyone help me with a CSS issue I'm experiencing in the latest versions of Chrome and Firefox? I can't seem to figure it out on my own. The problem arises with a container div that has a 50px top margin. Inside this container, there's a ...

htmlcss

Undefined jQuery was encountered on the object when using the appropriate selector

Having a jQuery issue with the following HTML code snippet: <div class="side-finder"> <div class="brand"><img src="/img/test.net-logo.png" /></div> <div class="finder-content"> <ul class="nav nav-pills nav-stacked" id= ...

javascriptjqueryhtmltwitter-bootstrapundefined