How to display certain content underneath another block of content


Tags: html,css

Problem :

I have a screenshot below where it displays exam information, a timer and some questions:

enter image description here

Now the issue is that I want the Question details to be displayed underneath the exam details, not next it. My question is how can I get the questions to be displayed underneath? I want the questions beneath one another as well

HTML/PHP:

//EXAM DETAILS
 <div class='lt-container'>

    <p><input type='hidden' id='studentId' name='studentId' value='<?php echo $dbStudentId; ?>' /></p>
    <p><strong>Student:</strong><?php echo $dbStudentAlias . " - " . $dbStudentForename . " " . $dbStudentSurname; ?> <br/>
    <strong>Module:</strong><?php echo $dbModuleNo . " - " . $dbModuleName; ?> 
    <input type='hidden' id='moduleId' name='moduleId' value='<?php echo $dbModuleId; ?>' /><br/>
    <strong>Assessment:</strong><?php echo $dbSessionName . " - " . date('d-m-Y',strtotime($dbSessionDate)) . " - " . date('H:i',strtotime($dbSessionTime)); ?> 
    <input type='hidden' id='sessionId' name='sessionId' value='<?php echo $dbSessionId; ?>' /><br/>
    <strong>Assessment Weight: </strong><?php echo $dbSessionWeight; ?> <br/>
    <strong>Total Marks: </strong><?php echo $dbTotalMarks; ?> <br/>
    <strong>Penalty: </strong><?php echo $penaltymsg; ?> </p>
    </div>

//TIMER
    <div id='rt-container'>
    <h1><span id='countdown'><?php echo $dbSessionDuration; ?></span></h1>
    </div>

    <?php
    }

//QUESTION DETAILS
    foreach ($arrQuestionId as $key=>$question) {

    ?>

    <div class='lt-container'>
    <p><strong>QUESTION <span id="quesnum"></span>:</strong></p>
    <p><?php echo htmlspecialchars($arrQuestionNo[$key]) . ": " .  htmlspecialchars($arrQuestionContent[$key]); ?></p>
    </div>

CSS:

.lt-container{
 float: left;   
 }

#rt-container {
 clear: right;
 float:right;  
}


Solution :

Remove float:left from the .lt-container. And place the #rt-container above the .lt-container

.lt-container{   
 }
#rt-container {
 float:right;  
    background:red
}

DEMO


    CSS Howto..

    Show dropdown menu only when hovered on span in li

    How change the background colour of the kendo ui datepicker using css [duplicate]

    How to color the first word using CSS

    How to set display none on tag using css?

    How to theme elgg with HTML and CSS only? [closed]

    if i clone an element, when i customize (css) that element how can customize also the element cloned?

    Compass delimited list separator - how to set to – [duplicate]

    how to indent HTML forms on modals [closed]

    CSS: How to create colsgroup like semantic-ui way

    How to get the root directory of wordpress in css

    How to avoid messing formating up?

    How to add multiple css gradient as a multiple background?

    how to make colors generated via Javascript be stored permanently in CSS file with or without use of PHP

    How to hightlight non editable backgrid cells?

    :hover property overriden after jquery effect, how to get it back?

    How to add wikipedia in to a wordpress plugin

    How do I make a element a regular tab stop within a form?

    How to access an element's class value via CSS

    How can I create a drop down menu with JQuery

    Adobe Flex Show Content inside Rectangle (itemRenderer)

    How do I strip a line of text or amount of words/characters from stored text with CSS/Javascript?

    css - how to get floated divs to stack when you zoom in

    How to style last tag img css?

    how to make textarea looks like input[text] on form invalid

    How to CSS pairs of DIV text left/right of center

    How to hide and fade div using jquery and css

    Using HTML5 and CSS3 How can I keep two elements inline in a responsive container whilst maintaining the same margins?

    How to make corners of progress bar round in css

    How to create a dynamic-width arrow in CSS?

    How do I center images inside a list?