Trying to place DIV's side by side, but its not working

Question

Here is my code:

<div class="large-6 columns">
      <div id='box1'>
         <div id='text1'>
               Name
         </div>
         <div id='text3'>
               LastName
         </div>
   </div>
</div>

CSS looks like this:

#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;
}

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.

btw. I am using this inside a Zurb Foundation code. Writing my custom class on top of the existing CSS styles.

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.

Not a duplicate because if you take a look at my code, what the other answer is suggesting is already tried by me (its in my code). Still its not working in my case. I did a lot of thread search before posting it. — ssdesign, Apr 26 '13 at 18:09
Why aren't you using the native Foundation architecture to do this? Just curious. — vtacreative, Apr 26 '13 at 18:12
ok, floating and inline solved my problem but I would love to know how to do this with Foundation Architecture as well. I just started with foundation today. — ssdesign, Apr 26 '13 at 18:15

score 0 · Answer 1 · answered Apr 26 '13 at 18:22

Is there a reason you are adding the margin-left to each div? Cleaned it up a little and it seems to work.

#text1 {
    min-width: 0.5em;
    width: 28%;
    color: white;
}

#text3 {
    min-width: 0.5em;
    width: 72%;
    color: black;
}

.inner-box {
    float: left;
    margin-top: 53px;
    text-align: right;
    font-weight: 400;
    font-size: 1em;
    line-height: 1em;
}

http://jsfiddle.net/ferne97/8FzN5/1/

Also think about creating a re-usable class for all that code that is getting repeated in each inner div.

score 0 · Answer 2 · answered Apr 26 '13 at 18:30

http://jsfiddle.net/tahdhaze09/7FM82/

CSS:

#box1
{
    width:980px;
    float:left;
}
#text1{
    width:450px;
    float:left;
    background-color:#45e64c;
}
#text3{
    width:400px;
    float:left;
    background-color:#edc321;
}

HTML:

<div class="large-6 columns">
      <div id='box1'>
         <div id='text1'>
               Name
         </div>
         <div id='text3'>
               LastName
         </div>
   </div>
</div>

Text boxes, side by side. I left out the other CSS for simplicity.

score 0 · Answer 3 · answered Apr 26 '13 at 18:34

0

Here's how to do this with Foundation's native architecture:

<div class="large-6 columns">
    <p>Some content</p>
</div>

<div class="large-6 columns">
    <p>Some more content</p>
</div>

This will give you two containers, side-by-side, spanning the full width of 960px.

answered Apr 26 '13 at 18:34

vtacreative

618
8
22

Actually if you see my code, they need to overlapping div's. Thats why I had to custom CSS the Divs I wanted to Overlap. There is a circle and one of the text is inside the circle and other outside it. Not sure if foundation columns can be overlapped. – ssdesign Apr 26 '13 at 19:44

score 0 · Answer 4 · answered Apr 26 '13 at 18:37

I tried out the code on W3C school's try it editor. Your question does not really describe what you were expecting to see. Of course the "Name" and "Last name" beside each other. But within the circle? to left of it ?

I would recommend trying out the css on W3C's try it editor and playing around with the margins (margin-top, margin-left) and widths. Suggest starting by removing the margins and widths completely from the above css and then adding them one at a time. Of course check the try it editor for the changes due to each of the margin / width additions.

Trying to place DIV's side by side, but its not working

4 Answers4