CODEWITHSUNDEEP
htmlcss
Banshee
Banshee

Reputation: 15827

How to prevent element to jump down to second row?

Pleas take a look on this example : http://jsfiddle.net/yU6qG/5/

<div class="left">LeftMargin</div>
<div class="right">RightMargin</div>

.left {
    float:left;
    width: 100px;
    height: 100%;
    background-color : red;
}
.right {
    float:left;
    width: auto;
    height: 300px;
    background-color : blue;

}

If you try to resize the window you will see that the right div will jump down a row. How can I prevent this? Also, why does nto left take up 100% of the height?

Thanks

Edit1 : sorry, that was not clear, this is for a responsive design, the right div will grow and shrink.

Upvotes: 1

Views: 2833

Answers (6)

Skatox
Skatox

Reputation: 4284

Here is what you want: http://jsfiddle.net/894Z8/3/

Firt there's not such thing as height:100% you'll need to do some CSS tricks to implement them, because this attribute means 100% of parent's height.

What you want is to display the div as a table, you can do it with the following CSS (incompatible with IE 6 and 7)

Markup

<div class="table">
  <div class="left">LeftMargin</div>
  <div class="right">RightMargin</div>
</div>

CSS

.table {
    display: table;
}
.left {
    display:table-cell;
    min-width: 100px;
    height: 100%;
    background-color : red;
}
.right {
    display: table-cell;
    width: auto;
    height: 300px;
    background-color : blue;

}

The div and class Table is optional, but for better compatibility add it. With this, you can expand the height of the div to the other one and it won't be reduced it when resizing the window.

Upvotes: 1

Daniel
Daniel

Reputation: 4946

Change the css on the right div

.right {
    width: 200px;
    height: 300px;
    margin-left:100px;
    background-color : blue;
}

For the right div to be responsive, you will need to apply a percentage. Fill in to your liking.

.right {
    width: 60%;
    height: 300px;
    margin-left:100px;
    background-color : blue;
}

fiddle: http://jsfiddle.net/djwave28/yU6qG/7/

Upvotes: 0

Ejaz
Ejaz

Reputation: 8872

check this out The right div always covers the available space and does't get to next line upon screen resize 

.left {
    float:left;
    width: 100px;
    height: 300px;
    background-color : red;
}
.right {
    display: block;
    height: 300px;
    background-color : blue;
    box-sizing: border-box;
    -moz-box-sizing: border-box; 
    width: 100%;
    min-width: 200px;
}

Upvotes: 1

Kenneth
Kenneth

Reputation: 28747

This is what float does: push it left until no space is left, after that, put it on the next line.

You could use this instead:

<div class="parent">
    <div class="left">LeftMargin</div>
    <div class="right">RightMargin</div>
</div>

.left {
    display: inline-block;
    width: 100px;
    height: 100%;
    background-color : red;
}
.right {
    display: inline-block;
    width: 200px;
    height: 300px;
    background-color : blue;
}
.parent{
    width: 310px;
    border: 1px solid black;

}

Upvotes: 0

FelixH
FelixH

Reputation: 145

You just have to put a wrapper around it ;)

<div id="container">
<div class="left">LeftMargin</div>
<div class="right">RightMargin</div>

and your CSS is simple:

#container {
    width: 300px;
}

http://jsfiddle.net/3zUcZ/

Upvotes: 0

Ravichandran Jothi
Ravichandran Jothi

Reputation: 3066

Use this style, You need to use all in % only.( not in px)

.left {
    float:left;
    width: 25%;
    height: 100%;
    background-color : red;
}
.right {
    float:left;
    width: 50%;
    height: 125px;
    background-color : blue;

}

Upvotes: 0

Related Questions