[CSS] Two Divs together inline

macaco

01-15-2010, 04:07 AM

Hello codingforums community :thumbsup:

Well, I'm new with all those features about CSS related to divs. I've seen many tutorials about it and then I tried to make my own template but the problems came.

- I'm trying to create 2 div tags in the same line on page but the thing is, both will hold different images like this image:
http://img192.imageshack.us/img192/2149/laheuhau.jpg

That's what I want, but my only problem is how to make the width 100% gets until it reach to the right div position. When I do it the left div simply takes over all the line, and the right div goes to second line :eek:

Before:
http://img46.imageshack.us/img46/641/haiqk.png

After 100% width:
http://img121.imageshack.us/img121/5730/fuuuuuuuuuuuux.jpg

abduraooft

01-15-2010, 06:58 AM

Take a look at http://bonrouge.com/2c-hf-fluid(r).php

PS: Don't trust the design view of DW or any other wysiwyg editotors, since they are not browsers. Instead, preview your pages two or three browsers.

macaco

01-15-2010, 09:07 PM

Yeah, thanks.
But I think that this problem can be fixed with javascript :\
Gonna learn some things about it. If you guys have any other good tutorial about divs that could answer my question link to me :)

Excavator

01-15-2010, 11:15 PM

Hello macaco,
I'm sure it could be done with javascript but it's hardly necessary.
Try this - <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
html, body {
font: 100% "Comic Sans MS";
background: #FC6;
}
* {
margin: 0;
padding: 0;
border: 0;
}
#header {
height: 100px;
margin: 30px 0 200px;
background: #999 url(background/image1.jpg);
overflow: auto;
}
#hdr_right {
height: 100px;
width: 200px;
float: right;
background: #f00 url(background/imgage2.jpg);
}
</style>
</head>
<body>
<div id="header">
<div id="hdr_right">
Right column text
</div>
</div>
</body>
</html>