Suppose I have an HTML page with three blocks of fixed width (their height can vary if that's important), like shown on picture:
I would like to make it behave as shown on next picture: when browser screen width is reduced so it can't fit all three blocks in one line, first block goes down.
Is it possible to achieve such behavior? Preferably with CSS only but any working solution would be great.
<div style="width: 100%;">
<div style="display: inline-block; background-color: red; width: 200px;">DIV2</div>
<div style="display: inline-block; background-color: yellow; width: 200px;">DIV3</div>
<div style="display: inline-block; float: left; background-color: lightBlue; width: 200px;">DIV1</div>
<br style="clear: left;">
</div>
This one works. You put block 1 as the last one and only make that one float left.
It's virtually impossible to let the first block drop down without any Javascript trickery. Making the right-most one drop with float: left is easy on the other hand.
Use divs with float:left and fixed width values
<div style="float:right; width:250px; position:relative; height:100px; border:solid 1px #000000">
3
</div>
<div style="float:right; width:250px; position:relative; height:100px; border:solid 1px #000000">
2
</div>
<div style="float:right; width:250px; position:relative; height:100px; border:solid 1px #000000">
1
</div>
like so...
I am aware that the 1st one will go right but this is the simplest i can do without getting into javascript..
Put all these three blocks inside a div and set it's width to 100%, when the screen will resize the blocks will be arranged automatically.
<div style="width: 100%;">
<div style="width: 50px; float left;">DIV1</div>
<div style="width: 50px; float left;">DIV2</div>
<div style="width: 50px; float left;">DIV3</div>
<br style="clear: left;" />
</div>
Related
I have created a demo of my issue, I am trying to force text next to an image but when you shrink the browser window is knocks it down to underneath the image.
Jsfiddle
I need a better approach to this.
.avatar_ad_bg_desktop{
width: 100px;
height: 100px;
background-image: url('http://blogs.terrapinn.com/total-real-estate/files/2012/04/SAV_CMYK_LogocopyEng.jpg');
background-repeat: no-repeat;
background-size:cover;
float:left;
}
<div style="background: red; height: auto; overflow:auto;">
<div style="background: green;">title</div>
<div style="background: blue;">Web address</div>
<div style="float:left;">
<div class="avatar_ad_bg_desktop">
</div>
<div style="float: left; margin: 0 0px 0 10px; vertical-align:top; word-break: break-all;">Savills plc is a global real estate services provider listed on the London Stock Exchange</div>
</div>
</div>
Instead of setting float:left on the div with the text, set it with overflow:auto (or hidden)
FIDDLE
Now resize the browser window and see that the text fills up the remaining width
You can use table and table-cell format to get better result. Update your HTML like below.
<div style="background: red; height: auto; overflow:auto;">
<div style="background: green;">title</div>
<div style="background: blue;">Web address</div>
<div style="display: table;">
<div class="avatar_ad_bg_desktop">
</div>
<div style="display: table-cell; margin: 0 0px 0 10px; vertical-align:top; word-break: break-all;">Savills plc is a global real estate services provider listed on the London Stock Exchange</div>
</div>
</div>
</div>
DEMO
You can use the display:table / table-line / table-cell properties of CSS and remove the float:left declarations.
You set the container with display:table;
then you can have a display:table-cell; for each cells that must stay on the same line.
Here is an updated fiddle
http://jsfiddle.net/88anzh58/4/
I have this code: http://jsfiddle.net/spadez/TPKLv/
<div style="background-color:white; width: 400px;">
<span class="status" id="active"></span>Title
6
</div>
<div style="width: 100%; background-color: white; float:right;">
Test test
</div>
I'm trying to make the right column fluid, taking up the remaining space, and the left column fixed width. Can anyone tell me what I am doing wrong with my code, and if this is the best way of doing it?
Simplest is to use display:table-cell; (IE8 and above supported )
this way, you can fix the width of one div and next div will take up the remaining space
Once added, you can even use inline native methods like vertical-align, and since its not floating, adjusting the position of divs is easy through margin and padding depending on you layout! :)
check this demo
It is most compatible and cleanest you can get for fixed width and dynamic width in a page
for calc, it is incompatible with IE9 still
if you have to use it on regular basis, create a span as below :
span.fake_width{
display:block;
width:20px;
}
then just add it to the existing layout Demo
I suggest this, with the condition always left div width is 400px. And i assume is cause you use inline-style
html
<div style="background-color:white; width: 400px;float:left;">
<span class="status" id="active"></span>Title
6
</div>
<div id="rightCol" style="background-color: white; float:right;">
Test test
</div>
css
body {background-color: gray;}
#rightCol{
width: calc(100% - 400px);
}
fiddle
The most native way of doing this is to manipulate the box model:
I've added a float to the first div, and removed it from the second one.
this way the first div is treated as an inline-block and the second one is a block, which tries hard to ignore other inline blocks.
i've updated your fiddle: http://jsfiddle.net/TPKLv/3/
<div style="background-color:white; width: 400px; float:left">
<span class="status" id="active"></span>Title
6
</div>
<div style="width: 100%; background-color: white;">
Test test
</div>
Try like this: Demo
CSS:
.container {
background-color:blue;
height: auto;
overflow: hidden;
}
.sidebar {
float:left;
background-color:grey;
width: 100px;
}
.content {
background-color:green;
float: none;
width: auto;
overflow: hidden;
}
HTML:
<div class="container">
<div class="sidebar">
<span class="status " id="active"></span>
Title
6
</div>
<div class="content">Test test</div>
</div>
UPDATED FIDDLE LINK.
As you need, I added padding and margin for the div's and its working fine.
I have two divs and i want div2 will be next to div1. I tried use float:left and display:inline but nothing help.
Jsfiddle
How to do this?
P.S Sorry for stupid question but Im learning
Use float: left and box-sizing: border-box:
#div1 , #div2{
float: left;
box-sizing: border-box;
}
JSFiddle: http://jsfiddle.net/95rmz/4/
Check this fiddle:
http://jsfiddle.net/95rmz/3/
<div class="row" style="width: 390px;">
<div id="div1" style="width: 190px; border: solid black 1px; float: left; margin-right: 5px;">
Street
<input class="form-rej-normal" type="text">
<div class="errorMessage" id="User_street_em_" style="">
Pole Ulica nie może być puste.
</div>
</div>
<div id="div2" style="width: 190px; border: solid black 1px; float: left;">
Numer domu
<input class="form-rej-normal" type="text">
<div class="errorMessage" id="User_house_number_em_" style="">
Pole Ulica nie może być puste.
</div>
</div>
</div>
decrease the width of divs. if the first div is of full width then how can 2nd div come next to it.
The problem is that you are not calculating the width correctly. You set a 380px on the main div and give a 190px to each contained div.
That would be fine if you did just that, but you also added a border around each div, so now each of them has an extra 2px (1px left and 1px right) so they are actually 192px each. so you can solve it in several ways:
Set the main div to at least 184px.
Set box-sizing: border-box;, that will cause the browser to put the borders inside the div and not add to it's width - see here for more data: http://css-tricks.com/box-sizing/
Fiddle: http://jsfiddle.net/95rmz/6/
You can then try to follow this approach
<html>
<body>
<div style="position:relative; width:auto; height:auto; float:left; border:solid red 1px;">
this is div 1
</div>
<div style="position:relative; width:auto; height:auto; float:left; border:solid red 1px;">
this is div 2
</div>
</body>
</html>
For testing purpose you can also add border:1px; to check if your div tags are occupying more space than the resolution of your screen
I want to create some html.
In a div, which has a grey border, there should be two divs horizontally aligned. There should be a separating line between them.
<div style="width:400px; border-color:#D3D3D3; border-style:solid; border-width:1px;">
<div runat="server" id="plDiv" style="width:300px;">
one
</div>
<div style="border-left:1px; border-left-style:solid; border-left-color:#D3D3D3; width:100px;">
other
</div>
I excluded all my tries to use float because it just doesn´t do what I want. Can anyone help?
See the answer I just posted here a few moments ago:
Wrappers size reflecting its contents
This does exactly what you're asking.
Basically there are 2 divs inside a container and a dividing line between the two:
You can see this demonstrated here in this fiddle: http://jsfiddle.net/kWJ79/15/
<div style="width: 400px; border: 1px solid #D3D3D3;; overflow: hidden;">
<div id="plDiv" style="width: 300px; float: left;" runat="server"> one </div>
<div style="border-left: 1px solid #D3D3D3; width: 99px; float: left;"> other </div>
</div>
When the second div has a width of 99px (to take into account the border I assume) then the floats seem to work fine.
Please help me to understand why the image-div of the following code flows out of the box-div.
<body>
<div id="box" style="border: 2px solid green;">
<div id="image" style="height: 200px; width: 200px; background: red; float: left;"></div>
<div id="text" style="background: yellow;">This is some text</div>
</div>
</body>
In other words, I expected the green border to fully enclose both inner divs and not only the yellow one.
When a children its floating the parent doesn't wrap it. You can use two solutions for this:
#box{
overflow:hidden;
}
Or
#box{
float:left;
}
You can also use display:inline-block for the #box but that doesn't work on IE6
setting overflow to hidden is not always an ideal solution, as if you do have content which is larger than the container, it will not be displayed.
by adding a clearing element at the bottom of the container, you should see that the floated elements fit inside the parent.
<body>
<div id="box" style="border: 2px solid green;">
<div id="image" style="height: 200px; width: 200px; background: red; float: left;"></div>
<div id="text" style="background: yellow;">This is some text</div>
<div style="clear: left; height: 0; margin: 0; padding: 0"></div>
</div>
</body>
Obviously, you'll want to make a generic class for this and set the CSS in an external stylesheet - but the principle works.
Floated elements are allowed to extend beyond their parent element. To keep the floated element inside the containing element, you will need to add an empty element at the end that clears the float:
So inside the element with id="box", add something like this:
<div style="clear: left;"></div>
You have to use an element to "clear" the floated object, using style="clear: left;"