CODEWITHSUNDEEP
htmlcss
huican
huican

Reputation: 505

CSS draw circle left and right out of the box

I want to draw two circles in the middle position outside the inner box, but inside the outside box on the left and right side, like the picture shows below. Can someone give me some hint about it? enter image description here

    <div style="border: 1px solid red; width: 200px">
        <div style="text-align: center;">
            <i class="fa fa-circle"></i>
        </div>
        <div style="border: 1px solid red; margin: 0px 20px">
            <p class="title" style="width: 200px">This is a line</p>
            <p class="title" style="width: 200px">This is 2nd line</p>
        </div>
        <div style="text-align: center;">
            <i class="fa fa-circle"></i>
        </div>
    </div>

============= I used table to simulate, and it seems it is pretty good.

<table>
  <tr>
    <th></th>
    <th>
        <div style="text-align: center;">
            <i class="fa fa-circle"></i>
        </div>
    </th>
    <th></th>
  </tr>
  <tr>
    <td>
        <div style="text-align: center;">
            <i class="fa fa-circle"></i>
        </div>
    </td>
    <th>
            <div style="border: 1px solid red; margin: 0px">
                <p class="title" style="width: 200px">This is a line</p>
                <p class="title" style="width: 200px">This is 2nd line</p>
            </div>
    </th>
    <th>
        <div style="text-align: center;">
            <i class="fa fa-circle"></i>
        </div>        
    </th>
  </tr>
  <tr>
    <td></td>
    <td>
        <div style="text-align: center;">
            <i class="fa fa-circle"></i>
        </div>
    </td>
    <td></td>
  </tr>
</table>

Upvotes: 0

Views: 1148

Answers (2)

jack
jack

Reputation: 2914

You can use a mix of relative and absolute positioning here. Relative positioning on the container tells its child elements, "position yourself according to my boundaries". So you can do something like this:

  <div style="border: 1px solid red; width: 200px; position: relative;">
        <div style="text-align: center; position: absolute; left: 0; top: 50%;">
            <i class="fa fa-circle">*</i>
        </div>
        <div style="border: 1px solid red; margin: 0px 20px">
            <p class="title" style="width: 200px">This is a line</p>
            <p class="title" style="width: 200px">This is 2nd line</p>
        </div>
        <div style="text-align: center; position: absolute; right: 0; top: 50%;">
            <i class="fa fa-circle">*</i>
        </div>
    </div>

...That being said, inline styles like this are really tough to maintain and become a huge headache over time. You should read up on separating CSS from HTML, move these styles into a stylesheet, and link them back to the elements via classes.

Upvotes: 1

marcx
marcx

Reputation: 168

With a little css, this should be very easy! You can set the parent div to position: relative;, and the circles to position: absolute; with a position i.e. left: 20px; or right: -5%;. This will tell the circle to move 20px from the left of its parent, the outermost div.

If you want to get the circle exactly in the middle, you should change your px widths to percentages, and use the same relative&absolute with position to move the circles around.

Here's some more info! https://css-tricks.com/absolute-positioning-inside-relative-positioning/

Upvotes: 0

Related Questions