CSS Floating Divs Issue

Okay, I completely suck at CSS. But I need to do it.

You can see my issue at http://www.eresig.tk, I am trying to make the div with "Lorem ipsum" and the one with "Testing4" at the same height.

I do not want to use absolute position, I want to do it with floating. EDIT: I've got the answer I looked for.

-------------Problems Reply------------

If I understood your question correctly, you want the div with Testing 4 to be beside the one with Lorem ipsum. It that's the case, you need to set a specific width on your divs. As long as you leave the width unspecified, they will default to 100% and the Testing 4 div will fall below the other one.

I also didn't see a float on your Lorem Ipsum div.

I recommend that you read this posts:

Fluid Width Equal Height CSS Columns

try this css:

#loremipsum{
float: left;
width:50%;
background-color: yellow;
padding-bottom: 500px;
margin-bottom: -500px;
}

#testing4{
float: right;
width:50%;
background-color: red;
padding-bottom: 500px;
margin-bottom: -500px;
}

html:

<div style="overflow: hidden;">
<div id="loremipsum"></div>
<div id="testing4"></div>
</div>

If I got your question correctly,

Your CSS should look like

#container {width:100%; height:auto; overflow: hidden;}
#content-left {width:50%; float:left}
#content-right {width:50%; float:left}

And HTML markup

<div id="container">
<div id="content-left"></div>
<div id="content-right"></div>
</div>

The full code

<html>
<head>
<style>
#container {width:100%; height:auto}
#content-left {width:50%; float:left; height:50px; background-color:black}
#content-right {width:50%; float:left; height:50px; background-color:red}
</style>
</head>
<div id="container">
<div id="content-left"></div>
<div id="content-right"></div>
</div>

</html>

*note: I've added height:50px; background-color:black to see the result. You can remove this code, of course

And here is the example http://jsfiddle.net/QbLgu/

This is the basic things that every webdev MUST KNOW. You need to learn basics. Try to research, before asking question on SO

Category:css Views:0 Time:2011-09-18

Related post

  • CSS: Floating divs have 0 height 2012-01-26

    I'm trying to place 2 divs side by side inside of another div, so that I can have 2 columns of text and the outer div drawing a border around both of them: HTML <div id="outer"> <div id="left"> ... <div id="right"> </div> CSS

  • Floating div issue upon window resize 2012-04-17

    As I am transitioning from using template layouts to writing my own css scripts, I have run into many issues, but there's one preventing me from continuing. I have successfully created a 3 column layout with floating divs, however upon browser re-siz

  • CSS Floating Divs with different height are aligned with space between them 2010-09-02

    i am using left floating DIVs to simulate a two column layout (each div contains textfield to edit different data, like name, hobbies,...). So it should look like this 1 2 3 4 5 6 Now my div-boxes aren't always the same, since some DIVs have more ele

  • CSS floating div takes no width space 2010-09-02

    I have a very, i think basic, question regarding CSS with floating div objects. i have 5 divs Div1, Div2, Div3, Div4 and Div5 and what i am trying to do is the following Div1 float to left Div2, 3, 4, 5 float to the right (in the same order, so will

  • CSS Floated Div Layout Problem incl. code block 2011-04-04

    I have a simple 2-column CSS layout with floated divs. The LEFT column has a fixed width of 290px. I want the RIGHT column to occupy the rest of the display. However, in the RIGHT column, I have a <pre> block containing some code. I want the co

  • CSS Float divs sitting as block not as grid 2011-10-19

    Please Check out the fiddle on http://jsfiddle.net/Qu63T/1/ What I want is The green div to float next to the blue one. and the .block divs to appear as a grid. I don't want to remove the .m div and float the .blocks inside the container. What Can be

  • Floating div issue in IE 2012-01-25

    Further to Frame like in HTML I implemented floating divs in my JSP. It works properly in firefox but not in IE This is how I placed the div <div id="div2"> <font class='passageNumber'>Passage II</font> <font class='passageText'

  • css: floating div affects content of non-floating div 2012-03-20

    I've just finsished the google css walkthrough: http://code.google.com/intl/de-DE/edu/submissions/html-css-javascript/ After experimenting with the example files (file: css-walkthrough.html), I found some strange behavior, I couldnt explain. I have t

  • CSS: Floating DIV content spilling outside of container when using min-width. Rather have scrollers 2011-02-23

    hoping one of your guys would know the answer to this. I have 2 floating DIVS and one DIV containers content that has min-width. When I resize window and window is smaller than min-width content, the content spills out of the parent container. I woul

  • CSS Floated Div height issue, no simple solution? 2010-02-10

    I have an issue with CSS I can't solve. I've made . Let's say that the pink and green box's height are determined by there content. The pink box could sometimes be the smaller one. What I am trying to do is have the smaller box fix it's height to the

  • CSS floated divs with form elements disappear in Safari 3 on a mac 2008-10-10

    I'm roughing a layout together and doing some browser testing. Never came across this issue before, check out the contact form in the footer of this page http://staging.terrilynn.com/fundraising/ There is a div with a width of 298px floated to the ri

  • CSS: Floating div to right causes container div to stretch full width of screen in IE 2010-02-04

    I saw a similar question here, and did not see an answer. I'm having an issue where an element is floated right, inside a parent div, and it's causing the div to stretch the entire width of the page in IE7. This does not happen in any other browsers

  • CSS Floating Divs At Variable Heights 2011-03-08

    I have infinite number of divs of a 100px width, which can fit into a 250px width parent. Regardless of height, I need the divs to be displayed in rows, as shown in the image. I've tried resolving this, but the div height seems to be screwing it up.

  • IE6 CSS Float Dropdown Issue 2012-01-04

    I'm struggling with an IE6 float issue. (I know IE6 sucks but my huge company uses it..) I've created a simple, header, body, footer layout, with a content area and sidebar within the body. Essentially a common blog layout. I've had no problem achiev

  • CSS floated divs with margin between them (example img in description) 2011-05-21

    This is probably a classic problem but I can't seem to figure out the solution. I have a number of divs that need to wrap in a container. That's pretty simple by adding float: left and a fixed width. But, how do I get margin between them without havi

  • CSS: Floating DIVs in an odd order? 2011-07-14

    Ok, so I am trying to write some CSS for an Amazon WebStore. They format the pages like this: With some tweaking, and the removal of the right column (unneeded for our layout) I have managed to get the layout like shown below: The problem is, the red

  • Multiple rows with CSS floating divs 2011-07-21

    I would like to implement such design using floating CSS divs: --------------- |Header | --------------- |Col1| Row1 | | |--------| | | Row2 | --------------- | Footer | --------------- I searched around but found no easy way to do it. How could i ac

  • CSS: Overlapping DIVs issue 2012-01-17

    I want to have 2 divs. looking like that: The problem is that if i just set margin-top: -50px DIV2 becomes on TOP. If i use z-index, DIV2 goes behind, but the form on DIV2 cannot be used, since it DIV2 is somewhat behind, cannot be clicked, selected

  • Easy css floating div- Cannont find what is psuhing it down 2012-03-19

    why wont this div float in next to the rest of my content boxes? I had it working fine before but something is now pushing it down below the first fold of the page.. I have been starring at this for too long, can someone provide me some an idea of wh

Copyright (C) dskims.com, All Rights Reserved.

processed in 0.168 (s). 11 q(s)