Note that there are some explanatory texts on larger screens.

plurals
  1. POTrying to place DIV's side by side, but its not working
    primarykey
    data
    text
    <p>Here is my code:</p> <pre><code>&lt;div class="large-6 columns"&gt; &lt;div id='box1'&gt; &lt;div id='text1'&gt; Name &lt;/div&gt; &lt;div id='text3'&gt; LastName &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; </code></pre> <p>CSS looks like this:</p> <pre><code>#box1 { float: left; height: 125px; margin-top: 30px; margin-bottom: 30px; clear: none; width: 125px; border-top-left-radius: 95px; border-top-right-radius: 95px; border-bottom-right-radius: 95px; border-bottom-left-radius: 95px; background-color: rgb(232, 68, 58); position:relative; overflow:visible; } #text1 { float: left; font-size: 1em; color: rgb(255, 255, 255); width: 28%; height: auto; text-align: right; font-weight: 400; line-height: 1em; word-wrap: break-word; margin-left: 69.6%; margin-top: 53px; clear: none; min-height: 0px; min-width: 0.5em; font-family: snippet; overflow:auto; } #text3 { float: left; font-size: 1em; color: rgb(0, 0, 0); width: 72%; height: auto; text-align: right; font-weight: 400; line-height: 1em; margin-left: 125px; margin-top: 0px; clear: none; min-height: 0px; min-width: 0.5em; font-family: snippet; position:relative; overflow:visible; } </code></pre> <p>Now this is not giving me the required result. The Text-3 should actually appear next to the text-1. But somehow its wrapping down to the next tine.</p> <p>btw. I am using this inside a Zurb Foundation code. Writing my custom class on top of the existing CSS styles.</p> <p>EDIT: Although I solved the problem, just for the clarity of some of you, Text-1 is inside the circle and is right aligned to the edge of the circle. Text-3 is outside the circle and is left aligned to the edge of the circle. Such that the two text, are next to each other, one inside the circle and one outside.</p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload