how to creating a separator line which is always in the middle (center)


Tags: html,css

Problem :

I have two div that are next to each other. which one of them has float: left and another has float: right. the divs are contained a word. The number of character of this word is changing. Now I need to a separator line for separating them, something like this: |.

Here is my structure:

html:

<div id="main">
<div class="left"><?php echo $word1;?></div>
<div class="right"><?php echo $word2;?></div>
</div>

It should be noted that the size of main is fixed. (e.g. 200px)

css:

<style>
 #main {width: 200px;}
 .left {float: left}
 .right {float: right}
</style>

Example1:

// Initialization
<?php
$word1 = 'foo';
$word2 = 'bar';
?>

// output
+---------------200px------------------+
|foo                                bar|
+--------------------------------------+

Example2:

// Initialization
<?php
$word1 = 'stack';
$word2 = 'overflow';
?>

// output
+---------------200px------------------+
|stack                         overflow|
+--------------------------------------+

Now I need to a separator line like this: | between them. It should be noted that I want that this line always be in the middle (center). I want this output:

// output
+---------------200px------------------+
|stack ---N px--- | ---N px--- overflow|
+--------------------------------------+

And for more clarification: (Example3)

// Initialization
<?php
$word1 = 'hello world';
$word2 = 'test';
?>

// output
+---------------200px------------------+
|hello world --N px--- | --N px--- test|
+--------------------------------------+

or

+---------------200px------------------+
|hello world           |           test|
+--------------------------------------+

How can I do that ? I tried it with border-left (for right side div) and conversely but did not work. also I tried it with &nbsp;&nbsp;|&nbsp;&nbsp; but did not work.

here is my fiddle with border and padding. How can I do that ?



Solution :

If you're ok with just using the "|" character to separate the divs, this requires just a small amount of CSS and HTML changes. Note: the order of the divs does matter - that separator has to be last:

Your HTML:

<div id="main">
  <div class="left"><?php echo $word1;?></div>
  <div class="right"><?php echo $word2;?></div>
  <div class="center">|</div>
</div>

The new CSS:

    .left
    {
        float: left;
    }

    .center
    {
        margin-left: auto;
        margin-right: auto;
        text-align: center;
    }

    .right
    {
        float: right;
    }

Here is the fiddle.


    CSS Howto..

    how can i position text to either side of an image in html5

    Use CSS to show two div's with background image over a containing div

    How: have more than one CSS sprite on a page

    I have a video background on my bootstrap page - how can I make it “fixed”?

    How to go about making an image move up in the div on hover

    How to change width of

    How do browsers change font-weight if it's not present in the current font?

    How to put space between figure in image?

    How to make fading in background-color transition to bootstrap page using CSS?

    How does ASP.NET generate HTML?

    How can I center text on an image using Bootstrap?

    How can I tell a scrollbar to always start at the bottom with CSS?

    Possible to code a search box that searches for a specific tag in a div and then shows it / hides others? [closed]

    CSS: Is there a limit on how many classes an HTML element can have?

    How to get this functionality to work

    How do I fix hover property of a div?

    How can I bold specific HTML rows and columns with CSS or HTML?

    SCSS/SASS how apply style for all pseudo selectors

    css: how to format contact entry screen

    jQuery: How to animate height change without known heights?

    How can menu items be displayed from bottom up using CSS

    How to set input text color, but not placeholder color, in IE11

    How to use a variable for image paths with less mixins

    Javascript/CSS- how to change the colour of a textarea scrollbar without a third party JS library?

    how to make a span hold its position from an encroaching div

    How to locate which css include is used for an element

    How to implement min left/right in css

    How to select every 4th div inside another div CSS Selector [closed]

    How to correctly set the column widths on my HTML table?

    How do you solve this problem regarding aligning divs next to each other? [duplicate]