CODEWITHSUNDEEP
csscss-float
gco
gco

Reputation: 1700

How to float one div and stack two remaining divs with 100% width?

I know how to float divs and how to stack divs. But I can't get both of them together right now. What I need is this:

#########################################
#         #         #first_row          #
# #brand  ###############################
#         #        #second_row          #
#########################################

They lay all in my #header container with the following specs:

#header {
 width: 100%;
}

#brand {
 float:left;
 width: 300px;
}

#first_row, #second_row {
 width:100%
}

Upvotes: 0

Views: 53

Answers (5)

AdrianBsc
AdrianBsc

Reputation: 96

You need to wrap #first_row and #second_row in a div and float it left as well. Like:

<div id="header">
    <div id="brand">Brand</div>
    <div style="float:left">
        <div id="first_row">First row</div>
        <div id="second_row">Second row</div>
    </div>
</div>

Upvotes: 0

Alvaro Men&#233;ndez
Alvaro Men&#233;ndez

Reputation: 9012

Just wrap your first:row and second:row into a div with float:left and it will work:

<div id="header">

</div>
<div id="brand">
    brand
    <br/>
    brand
</div>
<div id="rows">
    <div id="first_row">First row</div>
    <div id="second_row">second row</div>

</div>

here you have an example

Upvotes: 0

Thomas Bormans
Thomas Bormans

Reputation: 5362

Here you go. 

#header {
	width: 100%;
}
#brand, #first_row, #second_row {
	float:left;
}
#brand {
	width: 300px;
	height: 300px;
}
#first_row, #second_row {
	width: calc(100% - 300px);
}
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
</head>
<body>
	<div id="header">
		<div id="brand">
			Brand
		</div>
		<div id="first_row">
			First row
		</div>
		<div id="second_row">
			Second row
		</div>
	</div>
</body>
</html>

Upvotes: 2

PI.
PI.

Reputation: 1668

Take a look at the media object:

http://www.stubbornella.org/content/2010/06/25/the-media-object-saves-hundreds-of-lines-of-code/

B

Upvotes: 0

Flo Schild
Flo Schild

Reputation: 5294

You need another container, floating right, then your div inside will be stacked :

<div id='header' class='floating-container'>
    <div class='left'>Brand</div>
    <div class='right'>
        <div class='first-row'>First Row</div>
        <div class='second-row'>Second Row</div>
    </div>
</div>

JSFiddle demo

EDIT : if you do not want to fix the size of the right column, just do not :

Second demo

Upvotes: 0

Related Questions