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 spin css cube each after each [closed]

    Showing required fields by bolding

    How to edit rails app in production env, specifically CSS

    How can I use jQuery to add a fade in hover effect to my nav items?

    AngularJS - how to set css class for the custom directive?

    How to create multiple spoiler buttons

    dynamic drop down how to show success using css (tic icon)

    Jquery: how to get menu to expand towards the right instead of the left

    How to get CSS around links like login button

    How to style Zend Checkboxes

    How to use toggle css classes on an element onclick?

    how to change the cssclass of a div after press a button in asp.net c#?

    How to specify different Css for different Mobiles (BB, Iphone, Nexus… )

    How to grouply select multi elements CSS?

    How to solve CSS background transparency?

    How to keep long image within background cover at any screen size in CSS?

    How to set padding-left to my custom textbox in css?

    Is it possible to apply css transitions on svg nodes? If yes, how?

    How to manage opacity of element INSIDE table row on HOVER this row?

    How do I make an `hr` with repeating small images?

    How to vertically center a div for all browsers?

    CSS Div with background image - how to allow for expansion of div on page?

    How do I pre-hide something in preparation to expose it in a jQuery animation?

    HTML/CSS/jQuery: How to set an “absolute text bottom” so that further text expands upwards?

    How can I prevent this plugin from popping up from behind the content area?

    How to create dashed radius border just with css?

    how can I apply css based on parent div class

    How to select part of a custom element with CSS?

    In Jsoup, how do I parse the CSS query by the attribute, instead of the data?

    how to add css for div tag