CODEWITHSUNDEEP
htmlcss
SemicolonExpected
SemicolonExpected

Reputation: 614

Having trouble putting two spans next to each other

I have two spans I would like next to each other.

<span id = "pic" >
    <img src="me.jpg" id = "prof">
</span>
<span id = "info">
    Lorem ipsum 
</span>

My CSS is: 

#pic{
    width: 40%; 
    float:left; 
    padding-top:6%;
    position: fixed;
    display: inline-block;
    margin-left: 15%;
}
#info{
    /*width: 40%;*/
    float:right;
    /*padding-left: 75%;*/
    padding-top:16%;
    color: white;
    display: inline-block;
}

The second span won't float to the right of the first span even with padding-left, or margin-left to 75% when theoretically I should just need 45% to get it to be 5% to the left of the first span.

When I don't have the first span as position fixed (I'd like the picture to stay as the text scrolls) the second span would pop to the top of the first rather than aside it, or on the bottom starting right next to the bottom where the first line of text aligns to the bottom of the picture.

Upvotes: 0

Views: 4276

Answers (5)

Amr Elmassry
Amr Elmassry

Reputation: 11

probably late for an answer, however, I'd like to present a technique I came up with to solve such problems that I faced lately...

I had two divs and I wanted to align them beside each others,and I have styled them inline and all these techniques and solutions that I read about here and there, and no matter I do, they display vertically...

The technique I thought of is to put border to the divs and see the space they acquire in the div or whatever they are in...

It turned out that the first div took the whole space horizontally and the other div could not stand beside it... so I reduced the width of the first div and all the solutions there worked out.

So it is not a solution rather that a technique to find a solution... I hope that this will help someone.

Upvotes: 1

aaroncatlin
aaroncatlin

Reputation: 3271

Percentage-based widths will not always work unless they are contained in a parent which has a known width. Try changing the spans to divs and containing them inside another div:

<div id="container">
    <div id = "pic" >
        <img src="me.jpg" id = "prof">
    </div>
    <div id="info">
        Lorem ipsum 
    </div>
    <br style="clear:both" />
</div>

CSS:

#container{
    width: 100%;
}
#pic{
    width: 40%; 
    float: left; 
    padding-top: 6%;
    margin-left: 15%;
}
#info{
    width: 45%
    float: left;
    padding-top: 16%;
    color: white;
}

Both sub-divs can float left. The second one stacks to the right of the first. The br tells the browser to clear the floats afterwards so any elements created after this will fall below.

Upvotes: 0

Daniel Briffa
Daniel Briffa

Reputation: 40

This should work 

#pic{
    width: 40%; 
    left:15%;
    padding-top:6%;
    position: fixed;
    display: inline-block;
}
#info{
    /*width: 40%;*/
    position:absolute;
    right: 0px;
    top: 16%;
    color: white;
    display: inline-block;
}

try it out and let me know if it is what you want

Upvotes: 1

user4420272
user4420272

Reputation:

There's only space for 20% or 20vw, so you can put margin-left/right or padding-left/right together a total of 20% only :

#pic{
    width: 40%; 
    float:left; 
    padding-top:16%;
    display: inline-block;
    background-color: pink;
}
#info{
    width: 40%;
    float:right;
    padding-left: 20%;
    padding-top:16%;
    color: white;
    display: inline-block;
    background-color: red;
}
<span id = "pic" >
    <img src="me.jpg" id = "prof">
</span>
<span id = "info">
    Lorem ipsum 
</span>

Upvotes: 0

ratbum
ratbum

Reputation: 1023

I'd suggest removing position: fixed; since that won't work with the arrangement that it looks like you're trying to achieve. See how it goes.

Upvotes: 0

Related Questions