The failure of CSS Layout Design

So I'm attempting to create a profile cover like the one shown below:

This is what my code looks like:

<div class="show_cover">
  <%= image_tag @show.cover(:show_cover) %>

  <!-- Mouseover Options-->
  <% if current_user == @host %>
    <div class="options">
      <%= link_to "Edit #{@show.name} Show", edit_show_path, class: "btn btn-embossed btn-danger btn-mini" %>

      <% end %>
    </div>

  <div class="show_cover_info">

    <div class="pull-left">
      <b><%= link_to @show.name, @show %></b><br>
      <small>The Best Show all over the Net</small>
    </div>

    <div class="pull-right">
      <%= link_to root_path,
                  class: "btn btn-embossed btn-mini btn-social-facebook" do %>
        <i class="icon-facebook"></i> | Facebook
      <% end %>

      <%= link_to root_path,
                  class: "btn btn-embossed btn-mini btn-social-twitter" do %>
        <i class="icon-twitter"></i> | Twitter
      <% end %>
    </div>


  </div>

</div>

And here's the CSS for it:

.show_cover {
  position: relative;
  background-color: #fff;
  border: 1px solid #ddd;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
}

.options {
  position:absolute;
  top:10px;
  left:10px;
  display:none;
}

.show_cover:hover

.options {
  display:block;

}

.show_cover_info {
  padding: 10px;
  font-size: 16px;
}

.show_cover_info small {
  position: relative;
  font-size: 12px;
  font-weight: normal;
  word-wrap: break-word;
  color: #888;
}

However, I am only getting this result:

The Issue:

The border radius is not wrapping around the title and social buttons correctly. There seems to be a line between them that shouldn't be there. What am I missing in my code?

Answer №1

To solve the issue, consider adding overflow auto to your container

.display_image {
    overflow: auto;
    position: relative;
    background-color: #fff;
    border: 1px solid #ddd;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
 }

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

Align content vertically within a div container

I have encountered an issue where I am trying to center vertically the content within a div. Here is an example of the structure: <div class="container-fluid"> <div class="row restaurant"> <div class="col-md-6"> & ...

The CSS variables set within the :root section of styles.scss are not recognized as valid

Trying to implement global colors using CSS variables in my Angular 11 app. The styles.scss file contains: :root{ --primary : #0b68e8; --secondary:#ABCFFF; } .test-class{ background: var(--primary); } However, when applying this class in one ...

Validate HTML 5 using Jquery assistance for best results

I have a form that includes HTML 5 Validations. I am looking to display a loader only when there are no error messages from the HTML 5 validation process. I have experimented with using the onclick event of the submit button and also attempted to trigger i ...

Mastering the art of sorting HTML tables with various columns using JavaScript and jQuery

When they click the button, it should alphabetize the rows in the table according to the clicked column. Is there a way to achieve this sorting functionality without using a javascript/jquery plugin or library? I prefer to develop my own code for this pa ...

The URL is functional in CodePen, but unfortunately does not seem to be working in JSFiddle

This code works perfectly on CodePen: http://codepen.io/ekilja01/pen/pEXLNY However, when tried on jsfiddle, the navigation bar is completely messed up. External resources are added on. What could be wrong? Any help would be appreciated! <link hr ...

When new text is added to Div, the first line is not displayed

One of the divs on my page has an ID of "TrancriptBox" and contains multiple lines of text. When I scroll through it on my iPad, everything works fine. However, if I scroll and then change the text within that div, it doesn't display the first line o ...

Ensure all input-group-addons have equal width with Bootstrap 4

Can the width of all prepend add-ons be made the same? For example, in this image, I would like Email, License Key 1, & License Key 2 to have equal lengths. Is this achievable? If I were to forgo add-ons and only use regular labels and a form grid, it wo ...

What are some ways to create a color background that extends beyond the confines of the 960 grid system?

Looking to achieve a header design similar to stackoverflow, where the background color expands and takes over both sides of the page while keeping the text centered. However, unsure about the correct technique to do this using the 960grid system. Here is ...

My website layout got messed up because of Chrome version 48

Once upon a time, I created a website. Despite its outdated design, it has been functioning properly. Even though I know it's time for something new, I've hesitated to make any changes because it still works. Surprisingly, parts of the page layo ...

Using Angular Universal with Prerender.io fails to display HTML content inside component tags

I have recently developed an Angular Universal application with nested components. My main issue now is that when using Prerender.io, it only returns the top-level component tags and not the HTML content within them. This seems to be a common problem for ...

Exploring Laravel 4's CSS Routing

Attempting to connect my CSS document in Laravel 4 has been a bit challenging. The location of my CSS file is: public/css/style.css In the view, I have the following link: <link type="text/css" rel="stylesheet" href="{{URL::asset('css/style.css ...

Ways to emphasize the current tab on the site's navigation bar?

Here's my question: I have a menu with different items, and I want to make sure that the active tab is highlighted when users switch to another page. I noticed that Stack Overflow uses the following CSS: .nav { float: left; font-size: 1 ...

Issue with Bootstrap 3 Modal: Missing Title and Input Labels

I'm currently working on customizing a bootstrap template for my friend's church website. My goal is to create a simple web presence for them, and I am in the process of setting up a contact form. I want this form to appear as a modal where users ...

Having trouble setting the width of a div. The styling keeps getting overridden by something else

I'm facing an issue where the style I need is not showing up in the source code. Specifically, I am attempting to make the .widgettext element narrower, but so far I have had no success. Unfortunately, I cannot share the entire theme on a platform lik ...

Styling with CSS: Centering elements in a flexbox container

I'm struggling to position the down arrow in the bottom center of the page using flex layout. Can someone offer assistance? Here is my current CSS/HTML code: .flex-description-container { display: flex; flex-flow: row wrap; align-items: center ...

Is it possible to have the logo centered with the menu bar?

I found a cool theme: Check it out here! Does anyone know how to center the logo and menubar on this template? <section class="page_toplogo ls s-pt-25 s-pb-20 s-py-md-30"> <div class="container"> ...

Looking to update the background color of the items in a sliding door menu using CSS

I'm having trouble changing the background color of my list items in a sliding door menu using CSS. I've successfully changed the left border to green and the text to white, but the background color remains unchanged. Below is the code I'm u ...

What is the best way to showcase the output of a Perl script on a webpage

I recently came across a resource discussing the process of executing a perl script from a webpage. What is the best way to run a perl script from a webpage? However, I am facing a situation where the script I have takes more than 30 seconds to run and d ...

Seamless infinite background scrolling on the canvas without any disruptions

In my HTML5/JS project, I have implemented infinite background scrolling using multiple canvases. The challenge I am facing is that while the animation is smooth after rendering, there is a quick hiccup when transitioning to the next frame due to the need ...

Adjust the language of the submit and reset button text based on a variable

I'm facing a simple question but I'm stuck right now... and I was hoping someone could assist me. My issue is as follows: I need to switch the values of two buttons, reset and submit, from Greek to English and vice versa based on a variable retri ...