Clear in one div affects second div

Collapse
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • cebristow
    New Member
    • Aug 2013
    • 2
    #1

    Clear in one div affects second div

    I have a two column layout. Each column contains a series of paragraphs that contain a lift aligned image and 1-2 lines of text.I have used clear:both on the p tag to prevent subsequent images from stacking horizontally (keeping all images to the left side. This works fine in the left hand column. When I do the same in the right hand column, all the content of the right-hand column is pushed down below the content of the left-hand column. Any way around this?
    Tags: None
    • shadowstrike
      New Member
      • Aug 2013
      • 21
      #2
      Can you share an image of what you are trying to acheiv?As far as what I can think of from your statement,you are trying to align image to the left side and paragraph element on the right side.So the easist way which it can be achiev is by applying float property.But still please do send me an image of what you are trying to acheiv

        Comment

        • cebristow
          New Member
          • Aug 2013
          • 2
          #3
          Here is the page in question.
          404 Not Found
          Http://bio.illinoisstate.edu/research/labs.aspx

          You can see that the content in the right hand column is pushed down below that of the left.

          I have limited editing capabilities . I have added the page styles for
          #twocolumnleft p and #twocolumnright p. without those styles, the second picture wraps andappears to the right of the first image.

          I know I could achieve the desired result with a table, but jaws hoping to avoid that if possible.

          Thanks for any suggestions.

            Comment

            • shadowstrike
              New Member
              • Aug 2013
              • 21
              #4
              Hi based on the web I created a small template of a id card.Diffrerent div are used for different purposes.Please do have a look at it.Incase if it help you out lemme know.And one thing,never use tables for such type of creation.Always use div
              Code:
              <body>

<style type="text/css">
*{
	margin:0px; 
}
.wrapper{
	width: 420px;
	height:250px;
	overflow: scroll;
	border: 5px solid;
	resize:both;
	margin: auto;
}

.id_card{
    width:400px;
    height:70px;
    background-color:#4dbbb5;
}

.id_card .photo{
   position: relative;
	margin-left: 10px;
	margin-top: 15px;
	width: 75px;
	height: 45px;
	background-color: green;
	top: 0px;
	float: left;
}
.id_card .desc{
	position: relative;
    background-color: red;
	width: 290px;
	height: 45px;
	margin-left: 100px;
	top: 15px;
	    
}



</style>
<div class="wrapper">
	<div class="id_card">
	    <div class="photo">Add<br/>Image
	    </div>
	    <div class="desc">Add<br/>Description
	    </div>
	</div>
	<br>
	<div class="id_card">
	    <div class="photo">Add<br/>Image
	    </div>
	    <div class="desc">Add<br/>Description
	    </div>
	</div>
	<br>
	<div class="id_card">
	    <div class="photo">Add<br/>Image
	    </div>
	    <div class="desc">Add<br/>Description
	    </div>
	</div>
	<br>
</div>
</body>

                Comment

                • shadowstrike
                  New Member
                  • Aug 2013
                  • 21
                  #5
                  If it answers your question please do close the ticket.

                    Comment

                    • Phyo Thinza
                      New Member
                      • Sep 2013
                      • 2
                      #6
                      I think, you should write float:none; in right hand div style tag..

                        Comment

                        Previous template Next
                        Working...