How to wrap the center content and make it take the remaining width of the div


Tags: html,css

Problem :

I have an <a> tag, which has two span tags floated, left and right and content in the center. How do I make the content wrap itself to the center? The content should take the remaining width after floating the span tags and their widths. Note: : I cannot add a span container for the text.

HTML:

<a class="container">
    <span class="right"></span>
    hello how are you
    <span class="left"></span>
</a>

CSS:

.container {
    width:200px;
    height:200px;
    border:1px solid;
    display:block;
}
.left {
    width:50px;
    height:200px;
    background:red;
    float:left;
}
.right {
    height:200px;
    width:100px;
    background:blue;
    float:right;
}

DEMO:



Solution :

Flexbox can do that

.container {
  width: 50%;
  margin: auto;
  height: 200px;
  border: 1px solid;
  display: flex;
  text-align: center;
  justify-content: space-between;
}
.left {
  width: 50px;
  height: 200px;
  background: red;
}
.right {
  height: 200px;
  width: 100px;
  background: blue;
}
<a class="container">
  <span class="right"></span>
  hello how are you
  <span class="left"></span>
</a>


    CSS Howto..

    how to make two functionality in one button.CSS BOOTSTRAP

    How do I apply CSS rules from a local domain to content in an iFrame from another domain

    How can I do this: text inside rectangle using HTML/CSS?

    How can I use CSS to make a multi-select box but have the label appear on top instead of to the left?

    CSS: how to select parent's sibling [duplicate]

    jQuery UI Tooltip with Arrow, why/how does this code work?

    How to create a loading image sprite using background position

    HTML, CSS how to make width of element always to bottom of page?

    How to put inline circles made in CSS under each other when screen scales?

    How to highlight an image after selection using css or jquery? [closed]

    How do let CSS change the inset shadow on li hover, instead of resetting it?

    How to style a UL/LI drop down

    Does Modernizr.js help in showing css 3 and html 5 on older browsers and how?

    How to Update a Class in HTML given a new Firebase response?

    How to apply color to all element between the first and the last without giving a number to nth-child()?

    Adding some automatic versioning to CSS files. How come I'm not able to pull assembly info?

    How to get the same height on two Bootstrap columns? [duplicate]

    How to set position of checkbox to middle of td and input type text using css? [duplicate]

    How do I get the name of div a user must click to appear in a text div?

    How can I make this kind of a border?

    How can i fill a paragraph (until end of line) with dashes using CSS

    how to make website more user friendly for mobile users [closed]

    How to load CSS on SSL pages?

    How to change this script into

    How do I investigate a “style sheet could not be loaded” message in Firefox?

    How to get use the functionality same as “-webkit-appearance” in firefox?

    hover div to show another div

    How make text before ul to come in single line in html?

    HOW TO check if an external (cross-domain) CSS file is loaded using Javascript

    how to indent jqgrid table?