CSS Floating Divs Issue

Question

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.

So basically you want the testing 4 box to have the same variable height as the div with the lorem ipsum?.. — sg3s
– sg3s, Commented Sep 18, 2011 at 11:23
Having the containers at the same position isn't possible with float.... unless you want the Testing4 to influence the lorem ipsum text... can you please explain what you are trying to do for what purpose so we can give you want instead of guessing? — sg3s
– sg3s, Commented Sep 18, 2011 at 11:32
The divs doesn't have to be the same height, but they need to have the same distance from the top. The left div's width should depend on the screen resolution, and the right one should always be 200px wide. — SnackerSWE
– SnackerSWE, Commented Sep 18, 2011 at 11:47

RWGodfrey · Accepted Answer · 2011-09-18 11:29:27Z

1

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.

answered Sep 18, 2011 at 11:29

RWGodfrey

8771 gold badge9 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Saeed Neamati · Accepted Answer · 2011-09-18 11:33:03Z

0

I recommend that you read this posts:

Fluid Width Equal Height CSS Columns

answered Sep 18, 2011 at 11:33

Saeed Neamati

35.9k42 gold badges140 silver badges192 bronze badges

Comments

LC Yoong · Accepted Answer · 2011-09-18 11:44:45Z

0

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>

answered Sep 18, 2011 at 11:44

LC Yoong

1,8723 gold badges16 silver badges20 bronze badges

1 Comment

SnackerSWE Over a year ago

But I don't want to have the same width. I want the left div with automatic width, and the right one should be 200px.

Tural Ali · Accepted Answer · 2011-09-18 11:46:26Z

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

Collectives™ on Stack Overflow

CSS Floating Divs Issue

4 Answers 4

Comments

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related