View Full Version : [CSS] Two Divs together inline

01-15-2010, 05: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:

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:


After 100% width:

01-15-2010, 07: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.

01-15-2010, 10: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 :)

01-16-2010, 12:15 AM
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">
<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);
<div id="header">
<div id="hdr_right">
Right column text
<!--end hdr_right--></div>
<!--end header--></div>