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 to reverse jQuery css styling?

    How did infusion.com skew the elements? The CSS file does not seem to have skewing in it and the menu is also skewed

    How to create new line with css or javascript?

    How can I register a css page from an ascx control?

    How can I avoid using too many classes in CSS?

    How to find absolute path to @font-face fonts with Firebug?

    How to check for text created by CSS?

    How to style
  • s inside
      as a table with custom height?
  • How To Set Height of Child Div According To Parent Div

    How can I use CSS pseudo-classes with GWT's UiBinder?

    How to automatically compile LESS into CSS on the server?

    How can I modify my CSS to require a class instead of a “+ label”?

    how to change triangle to up arrow using pure css

    How can I display an image as a menu item once the user has scrolled down the page 150px?

    CSS only - how to have a scrolling ul with all li on one line

    How to resize image on window resize in CSS?

    How to add css to dynamic div Id

    How to implement a drag and swap effect in CSS and JS [closed]

    How to add a rollover effect to the text on a map

    How does the arrival of HTML5 and CSS3 affect jQuery?

    How to make css background-image a fluid image work in IE

    How to define separate fonts for each font-style - CSS

    how to set the css left property of a class on the basis of an ID of a tag

    How to make div disappear when image is placed over it?

    Base 64 CSS background image not showing in IE

    How to display only the first few lines of a div (clamping)?

    How should I convert this PSD to HTML & CSS Menu

    How to design a cross client / browser compatible email?

    Asp.Net-MVC: How to style <%=Html.ActionLink()%> with Css?

    CSS How to I align a header with a height of 2em to the bottom