PDA

View Full Version : How can I put text on the same line as my image?


RedFinch
01-20-2015, 05:56 PM
Hi everyone.

I've been trying to align a div to the right of an image with no luck. I've tried float:right, text-align:right; in the parent containers but the text always ends up being at the bottom and right of the image. Here's my code block:

<div id="tab1" class="tab_content" >

<p id= "tab1_image_p" ><img id="tab1_image" src="images/playerPlaceHolder.gif" alt=""/>


<div id="tab1_content" class="fluid ">
<strong>
Contents of tab 1
Contents of tab 1
Contents of tab 1
</strong>

</div>

</p>

</div><!-- #tab1 -->

How can I make the text between <strong> next to the image on the same line and to the right?

edbr
01-21-2015, 12:58 AM
post the styles for your divs

RedFinch
01-21-2015, 04:53 PM
Here's my style sheet:

@charset "utf-8";

#tab1_image{

float:left;



}
#tab1_content{

width:100%;




}
#tab1_image_p{

width:24%;


}

ul.tabs {
margin: 0;
padding: 0;
float: left;
list-style: none;
height: 32px;

width: 100%;

}
ul.tabs li {
float: left;
margin: 0;
cursor: pointer;
padding: 0px 21px ;
height: 31px;
line-height: 31px;

border-left: 1px solid #999999;
border-top:2px solid #a1a1a1; border-radius:10px; margin:1px; padding:5px;
font-weight: bold;
background: #EEEEEE;
overflow: hidden;
position: relative;
}
ul.tabs li:hover {
background: #CCCCCC;
}
ul.tabs li.active{
background: #FFFFFF;
border-bottom: 1px solid #FFFFFF;
}
.tab_container {

clear: both;
float: left;
width: 100%;
background: #FFFFFF;





}
.tab_content {
padding: 5px;
font-size: 1.2em;
display: none;

}
#container {
width: 60%;
margin: 0 auto;

border:2px solid #a1a1a1; border-radius:10px; margin:1px; padding:5px;
}
#ad{
background:black;

}

#tab1{


}
#aside{
border:2px solid #a1a1a1; border-radius:10px; margin:1px; padding:5px;



}

edbr
01-22-2015, 12:21 AM
try this ( i put styles inlibe for tedting purpose only.
i moved the closing p tag and also the comma between id and class in the tab
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>

<style>#tab1_image{float:left;}
#tab1_content{width:100%;}
#tab1_image_p{width:24%;}

ul.tabs {margin: 0;padding: 0;float: left;list-style: none;height: 32px;
width: 100%;}
ul.tabs li {float: left;margin: 0;cursor: pointer;padding: 0px 21px ;
height: 31px;line-height: 31px;border-left: 1px solid #999999;
border-top:2px solid #a1a1a1; border-radius:10px; margin:1px; padding:5px;
font-weight: bold;background: #EEEEEE;overflow: hidden;
position: relative;}
ul.tabs li:hover {background: #CCCCCC;}
ul.tabs li.active{background: #FFFFFF;border-bottom: 1px solid #FFFFFF;}
.tab_container {clear: both;float: left;width: 100%;background: #FFFFFF;}
.tab_content {
padding: 5px;font-size: 1.2em;display: none;}
#container {width: 60%;margin: 0 auto;border:2px solid #a1a1a1; border-radius:10px; margin:1px; padding:5px;
}
#ad{background:black;}
#tab1{}
#aside{border:2px solid #a1a1a1; border-radius:10px; margin:1px; padding:5px;
} </style>
</head>
<body>
<div id="tab1 class="tab_content" >

<p id= "tab1_image_p" ><img id="tab1_image" src="images/lotus.png" alt=""/></p>
<div id="tab1_content" class="fluid ">
<strong>
Contents of tab 1
Contents of tab 1
Contents of tab 1
</strong>

</div>
</div><!-- #tab1 -->
</body>
</html>

RedFinch
01-24-2015, 03:01 PM
Thanks...that did it!