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?

Aug 24 '13 #1

Subscribe Post Reply

1731

shadowstrike

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

Aug 24 '13 #2

cebristow

Here is the page in question.
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.

Aug 24 '13 #3

shadowstrike

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

Expand|Select|Wrap|Line Numbers

 
<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>

Aug 26 '13 #4

shadowstrike

If it answers your question please do close the ticket.

Aug 27 '13 #5

Phyo Thinza

I think, you should write float:none; in right hand div style tag..

Sep 10 '13 #6

by: David Pautler | last post by:

I'm creating a web-based authoring tool where one form encompasses several sections for editing. I'd like each section to have its own reset button, so that use of that button affects only that...

HTML / CSS

Changing doctype affects border and background

by: The Good Son | last post by:

I'm trying to get my head around a problem that has me baffled. The following element: #wrapper {border:1px solid #000;background:#fff;} Renders as expected when using this DTD: ...

HTML / CSS

Error trapping ignored on second pass (DAO recordset duplicates error 3022)

by: Nathan Bloomfield | last post by:

Hi there, I am having difficulty with a piece of code which would work wonders for my application if only the error trapping worked properly. Basically, it works as follows: - adds records...

Microsoft Access / VBA

cin.clear() does not work

by: AD | last post by:

Hi I am trying to read elements of a vector from console (cin) in two steps ie, read a list of numbers from cin. Sort these. Then read from cin again and append in same vector. ...

C / C++

Testing Query Performance - clear out cache

by: traceable1 | last post by:

I am trying to improve the performance of a query. No matter how bad it runs the first time, it runs really fast the second time. So how can I tell if I've done anything to improve the query if...

Microsoft SQL Server

simulations contra the terroristic nimbus of the second law

by: galathaea | last post by:

On Mar 2, 11:29 pm, galath...@veawb.coop (galathaea) wrote: still being very naive about this whole crackpot / crank thing i accidentally let the engineer inside think too hard about this ...

C / C++

Three column layout, middle column clear:both; affects other two columns;no tables

by: Jim Carlock | last post by:

I'm working with three column layouts without tables. The page in question... http://www.microcosmotalk.com/images/garden/vine.asp Using clear:both; causes problems in the left and right...

HTML / CSS

Remote Desktop Affects Windows Application on network interruption

by: =?Utf-8?B?TVNU?= | last post by:

To demonstrate my problem, I have a very simple VB Windows application. It has a text box that is used to display a counter, a button to reset the counter, and a timer that increments the counter...

.NET Framework

What hardware affects GetCurrentHwProfile

by: edu1982edu | last post by:

MSDN on GetCurrentHwProfile: Remarks The GetCurrentHwProfile function retrieves the display name and globally unique identifier (GUID) string for the hardware profile. The function also retrieves...

Visual Basic .NET

How to turn on java script in a villaon keypad mobile phone

by: Charles Arthur | last post by:

How do i turn on java script on a villaon, callus and itel keypad mobile phone

Java

Batch import of multiple excel files into the database

by: ryjfgjl | last post by:

If we have dozens or hundreds of excel to import into the database, if we use the excel import function provided by database editors such as navicat, it will be extremely tedious and time-consuming...

Data Management

Merging data from multiple Excel files

by: ryjfgjl | last post by:

In our work, we often receive Excel tables with data in the same format. If we want to analyze these data, it can be difficult to analyze them because the data is spread across multiple Excel files...

Data Management

Migrating Website to Cloud - Emmanuel Katto

by: emmanuelkatto | last post by:

Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel

General

How to build RAID in BIOS?

by: Hystou | last post by:

There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...

Computer Hardware

What is ONU?

by: marktang | last post by:

ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...

General

Problem With Comparison Operator <=> in G++

by: Oralloy | last post by:

Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...

C / C++

The easy way to turn off automatic updates for Windows 10/11

by: Hystou | last post by:

Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows...

Windows Server

Discussion: How does Zigbee compare with other wireless protocols in smart home applications?

by: tracyyun | last post by:

Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each...

General

Clear in one div affects second div

Similar topics