CODEWITHSUNDEEP
htmlcss
Wocugon
Wocugon

Reputation: 586

Text not staying in div, which is inside another div?

simple code, I tried various ways but I can't change position of the text inside a div which is inside another div!?

HtML:

<div class="left_container">

<?php 
$i=1;
while($i<=6)
{
echo "<br><div class='data_block'><img src='g.jpg' class='data_image'/><span class='.data_title'>TOPIC TITLE HERE</span></div>";    
$i++;   
}
?>

</div>

CSS: 

.left_container
{
    background-color:;
    margin-left:5%;
    margin-top:5%;
    width:70%;
    height:1000px;
    overflow:scroll;
}

.data_block
{
    background-color: white;
    width:95%;
    height:20%;
    border:solid 1px #006666;
    margin-left:auto;
    margin-right:auto;
}

.data_title
{
    font-size:18px;
    font-family:Nevis;
    margin-left:500px;
}

I want to reposition the "TOPIC TITLE HERE", set left margin, keep it in center. But nothing works on it! The text is just positioned at the lower part of the div!? why?

EDITED: the error was class=".data_title" which I corrected it but still problem is there! The text is showing outside the div now!

Upvotes: 1

Views: 366

Answers (3)

Noman
Noman

Reputation: 4116

Defining class with . (dot) is not proper, it should be class='data_title'.

change 

class='.data_title'

to 

class='data_title'

You should also add float: left to your CSS.

Upvotes: 4

Vignesh Bala
Vignesh Bala

Reputation: 919

Change the class name class=".datablock" into class="datablock".

And then add your positioning code.

EDIT

Add float: left; or display: block; for your class styles.

Upvotes: 0

Happy Coding
Happy Coding

Reputation: 2525

Change this 

class='.data_title'

to

class='data_title'  and

<div class="aleft_container">

</div>

You have to modify your css also i.e, change your class name.

.aleft_container
{
    background-color:some-color;
    margin-left:5%;
    margin-top:5%;
    width:70%;
    height:1000px;
    overflow:scroll;
}

.data_block
{
    background-color: white;
    width:95%;
    height:20%;
    border:solid 1px #006666;
    margin-left:auto;
    margin-right:auto;
}

.data_title
{
    font-size:18px;
    font-family:Nevis;
    margin-left:500px;
}

Upvotes: 0

Related Questions