Clear in one div affects second div

2 New Member

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 Reply

1735

shadowstrike

New Member

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

New Member

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

New Member

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

New Member

If it answers your question please do close the ticket.

Aug 27 '13 #5

Phyo Thinza

New Member

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

Sep 10 '13 #6

Similar topics

2165

Can a form have multiple resets where each affects only part of the form?

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 section. I can't find anything in the 4.0 spec about how to do this, and the only mention in this group I found is from 1998 below (CERN blocked my...

HTML / CSS

4399

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: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

HTML / CSS

6875

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 from rsSource into rsDest - if it finds a key violation then it deletes the current record from rsDest and adds the new record from rsSource. This...

Microsoft Access / VBA

6203

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. /*****************************************************************/ #include<iostream> #include<algorithm> #include<vector>

C / C++

13796

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 it always comes back quickly after the first run? I assume the query/data/plan is in cache - how can I clean it out for my session? Thanks in...

Microsoft SQL Server

2637

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 since my degree is in physics simulations and my career is in programming and i happened to have a simulation generator i have been building i...

C / C++

5506

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 <div> columns, meaning that each <divis not autonomous, they interact with each other when clear: styles apply.

HTML / CSS

7056

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 every second. I remote desktop to the computer hosting this application and run the application. It starts up and displays the counter...

.NET Framework

1454

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 the reported docking state for portable computers with docking stations. The system generates a GUID for each hardware profile and stores it as...

Visual Basic .NET

7583

Changing the language in Windows 10

by: Hystou | last post by:

Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language...

Windows Server

7888

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, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. ...

C / C++

7642

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 Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For...

Windows Server

5213

Couldn’t get equations in html when convert word .docx file to html file in C#.

by: conductexam | last post by:

I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert...

C# / C Sharp

3643

Trying to create a lan-to-lan vpn between two differents networks

by: TSSRALBI | last post by:

Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in...

Networking - Hardware / Configuration

3626

Windows Forms - .Net 8.0

by: adsilva | last post by:

A Windows Forms form does not have the event Unload, like VB6. What one acts like?

Visual Basic .NET

2082

transfer the data from one system to another through ip address

by: 6302768590 | last post by:

Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system

C# / C Sharp

1200

How to add payments to a PHP MySQL app.

by: muto222 | last post by:

How can i add a mobile payment intergratation into php mysql website.

PHP

924

Comprehensive Guide to Website Development in Toronto: Expert Insights from BSMN Consultancy

by: bsmnconsultancy | last post by:

In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating...

General