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.
Related
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
If I have more divs floating left in a container div, how can I draw lines between them horizontally if they don't fit in one row?
For example if:
<div id="main">
<div id="div1" style="float:left; width: 80px;"></div>
<div id="div2" style="float:left; width: 80px;"></div>
<div id="div3" style="float:left; width: 80px;"></div>
</div>
the main div's "width" becomes less than 240 px then the 3 contained div will be displayed in two rows. In this case I want to draw full length lines between these two rows.
If the divs are of a known height, the best way is to have a repeating background image in the "main" id, like so:
#main {
background-image:url('horizontal_line.gif');
background-repeat:repeat;
}
The trick though is that horizontal_line.gif must have a height higher than that of the div units so that the line will be hidden if there's only one row.
horizontal_line.gif (or png) should be a straight line with a width of 1px and a height of, for example, 100px, where 99px are transparent and 1px at the bottom is the color of the line (assuming you want your line's thickness to be 1px)..
if you want to do it with plain css and different height, you could do it this way (depending on you page structure you probably need to do some changes), it indeed adds some additional html code, but depending on what you want to do it is a fast end flexible solution.
because of the overflow: hidden it would not work in every situation.
css
#main {
overflow: hidden; //<-- hides the line if the element is in the frist row
}
.line {
position: relative;
font-size: 0px;
top: -1px; //<-- hides the line if the element is in the frist row
left: 0px;
width: 240px; //<-- the full width of the line
border-top: 1px solid black;
}
html
<div id="main">
<div id="div1" style="float:left; width: 80px;">
<div class='line'></div>
aaa<br>aaaaa
</div>
<div id="div2" style="float:left; width: 80px;">
<div class='line'></div>
aaa<br>aaaaa
</div>
<div id="div3" style="float:left; width: 80px;">
<div class='line'></div>
aaaa<br>aaaaa<br>aaaaaa
</div>
</div>
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;"
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>