Behaviour of divs next to eachother - html

I have some divs which don't behave like I wish.
<div class="list-product-with-border">
<div style="width:80px; display:inline-block;">img</div>
<div style="display:inline-block;"><b>Productname</b></div>
<div style="float:right; width:80px;">
<div>
<button id="editBtn">Edit</button>
</div>
<div>
<button id="removeBtn">Remove</button>
</div>
</div>
</div>
JSFiddle link
Two problems here:
the bordered divs is not high enough: the 'remove' button is not visually in the bordered div
When the 'product name' is longer, the buttons are rendered under the div with the product name. I would like the product name to be over multiple lines when this happens. The three divs should always be next to eachother.
The first and last div has a fixed width, the middle div (product name) should stretch with the size of the bordered div

Personally I'd use a table for this. Each row of the table is an item, and you have a column of images, a column of names, and a column of actions. Is this any different to the tables used for invoices?
I can't quite get the effect you want, but improvements can be made: a floated element should come before the elements that are to go around it - so in this case, it should be the first thing inside the list-product-with-border container. Also, you should either have an element with clear:both at the end of the container, or set the container to have overflow:hidden to force the floated element to be inside.

Do you want it like this?
Here's the Fiddle
<style>
.list-product-with-border {
padding:3px;
width:60%;
border:1px solid black;
overflow: hidden;
height: auto;
}
</style>
And now the HTML
<div class="list-product-with-border">
<div style="width:80px; display:inline-block;">img</div>
<div style="display:inline-block; overflow:hidden; height: auto;"><b>Productname Is the right choice baby, as you can see its just done</b></div>
<div style="float:right; width:180px;margin-top: 10px;">
<div style="float: left;">
<button id="editBtn">Edit</button>
</div>
<div style="float: left;">
<button id="removeBtn">Remove</button>
</div>
</div>
</div>
</div>

You must use display:table-cell instead of display:table-column and remove float:left for .divCell.
And add this style:
.headRow{
display:table-row;
}

Related

How to keep divs from breaking while keeping them centered

I've got a red box and a green one, side-by-side, and centered. When the browser width is smaller than the width of the squares, they break into separate lines. How do I keep them together?
(I tried using a container div with their combined widths, which does the job in keeping them together, but they no longer are centered.)
Any suggestions?
The code:
<body>
<div style='text-align:center;font-size:0'>
<div style='display:inline-block;background-color:red;width:200px;height:50px'></div>
<div style='display:inline-block;background-color:green;width:200px;height:50px'></div>
</div>
</body>
You can run it here: https://plnkr.co/edit/2De21ziNmaeleFmkPuPF?p=preview
This can be done in many ways, here is 3:
Use min-width
<div style='text-align:center;font-size:0; min-width: 400px'>
<div style='display:inline-block;background-color:red;width:200px;height:50px'></div>
<div style='display:inline-block;background-color:green;width:200px;height:50px'></div>
</div>
Use white-space: nowrap
<div style='text-align:center;font-size:0; white-space: nowrap'>
<div style='display:inline-block;background-color:red;width:200px;height:50px'></div>
<div style='display:inline-block;background-color:green;width:200px;height:50px'></div>
</div>
Use display: flex;
<div style='text-align:center;font-size:0;display: flex;justify-content: center'>
<div style='display:inline-block;background-color:red;width:200px;height:50px'></div>
<div style='display:inline-block;background-color:green;width:200px;height:50px'></div>
</div>
Try using Flex-box
.parent{
display:flex;
border:1px solid green;
width:500px;
}
.parent div{
background:green;
width:100px;
height:100px;
margin:20px;
}
<div class="parent">
<div>cell1</div>
<div>cell2</div>
</div>
Hope this helps
If you give them a fixed width (ex 200+200px), when that div width is passed (ex mobile width of 375px < 400px of divs sum), the last element slide on the next row.
With width of 35% for each other, will look exactly as you want it for that 200px.
<body>
<div style='text-align:center;font-size:0; width: 100%;'>
<div style='display:inline-block;background-color:red; width:35%;height:50px'></div>
<div style='display:inline-block;background-color:green; width:35%;height:50px'></div>
</div>
</body>
Here is the link to your code
EDIT:
Here is a usefull link for understanding better the width options depends of the width of device, and I encourage you to take a deeply look inside of w3schools, or other platforms where you can learn better how to manipulate elements of html, with css and js.
screen-width
Try using width: 50% on the boxes instead of width: 200px.

Ways to align divs side by side in another div

I used 4 different ways to align nested divs side by side. I expect these 4 ways to be correct, but only one is working (float). Can somebody explain why ?
<div style="background-color:black; width:100px; height:100px;">
<span style="background-color:red;width:70%;height:100%;"></span>
<span style="background-color:blue;width:30%;height:100%;"></span>
</div>
<br/>
<div style="background-color:black; width:100px; height:100px;">
<div style="background-color:red;width:70%;height:100%;display:inline"></div>
<div style="background-color:blue;width:30%;height:100%;display:inline"></div>
</div>
<br/>
<div style="background-color:black; width:100px; height:100px;">
<div style="background-color:red;width:70%;height:100%;float:left"></div>
<div style="background-color:blue;width:30%;height:100%;float:left"></div>
</div>
<br/>
<div style="background-color:black; width:100px; height:100px;">
<div style="background-color:red;width:70%;height:100%;display:inline-block"></div>
<div style="background-color:blue;width:30%;height:100%;display:inline-block"></div>
</div>
Or JSFiddle
Thanks in advance.
A <span> isn't a block element, so it doesn't have width and height.
The same goes for <div>'s set to display: inline.
This works as you expected.
You can remove the white space between the div's to make it work. Elements set to inline-block have a space between them just like two words would. That's why you could also set font-size: 0; and it would work.
You could do the same as #3 but with position: absolute.
this is painfull... but the first one, the span is an inline element, so is the second set the div that has the style="inline" attached to it. This means they wont accept any height or width styles, as they are not blocks!
Your first example uses SPANs, SPANs are an inline element and therefore you cannot apply a height or width to them.
Your second example, you are changing a BLOCK element (DIV) but changing it into an inline element cannot apply a height or width to them.
Floating an element removes it from the flow of the document, so different rules apply, and you can apply width and height
The last example will work if you remove the white space between the 2 nested DIVS:
<div style="background-color:black; width:100px; height:100px;">
<div style="background-color:red;width:70%;height:100%;display:inline-block"></div><div style="background-color:blue;width:30%;height:100%;display:inline-block"></div>
</div>
http://jsfiddle.net/kKScJ/76/
try this:
give on div inline style code as float:left;
it give as align div all are one side one
<div style="background-color:black; width:100px; height:100px;float:left;">
<span style="background-color:red;width:70%;height:100%;"></span>
<span style="background-color:blue;width:30%;height:100%;"></span>
</div>
<div style="clear:both;"></div>
<div style="background-color:black; width:100px; height:100px;float:left;">
<span style="background-color:red;width:70%;height:100%;float:left;"></span>
<span style="background-color:blue;width:30%;height:100%;float:left;"></span>
</div>

Placing div container horizontally in html

I am completely new to HTML and struggling to know how to place align div tags or position containers horizontally. By default, div containers are placed vertically.
From what I found in different links were nested divs that look something like this :
<div id="ParentContainer" style="height:100%; width:100%; overflow: hidden;">
<div id="chart_div" style="float: left; width:50%;">Left Side Menu</div>
<div id="chart_div2" style="float: left; width:50%; ">Random Content</div>
</div>
If this is how I do it, how do I refer to chart_div and chart_div2 ?
Before this, I could refer them directly with div id to place elements at that particular location.Please suggest simplest possible solution as I am completely new to html and infact simplest CSS confuses me.
Edit:
<div id="ParentContainer" style="height:100%; width:100%; overflow: hidden;">
<div id="chart_div" style="float: left; width:50%; display:inline ;">Left</div>
<div id="chart_div2" style="float: left; width:50%; display:inline ;">Random</div>
</div>
How do I refer them now ? Is it just chart_div or something like ParentContainer.chart_div ?
Edit 2 :
<div id="chart_div" style="float: left; width:50%; display:inline ;">Left</div>
<div id="chart_div2" style="float: right; width:50%; display:inline ;">Random</div>
Using floats to horizontally align divs is one of the simplest ways to create complex layouts with HTML and CSS. When floating divs you should almost always apply a width to the div in question. A detailed example here: Three divs in one row and fourth in the second row
Edit: If you are asking how to select those divs in your javascript, a simple method would be to use getElementById( 'chart_div' ) and getElementById( 'chart_div2' ) respectively.
try adding display: inline
for example:
Left Side Menu
You also have a extra ; on the second tag.
Seems like you want to float the div's horizontally if so
<div id="chart_div" style="float: left; width:50; ;">Left Side Menu</div>
Correct the inline style width and don't forget to modify parent div margin and padding.
Set div chart_div Float Left and chart_div2 Float Right then you will achieve what you are looking for.
Another option to use bootstrap which give you great control over your layout.
I'm sending you my code which I was able to float the div's correctly copy my code and save it as HTML then check it out.
<html><head><style type="text/css">#parent{width: 100%;height: 100%;overflow: hidden;background-color: red;}#child1{float: left;width: 50%;height: 50%;display: inline;background-color: blue;}#child2{float: left;width: 50%;height: 50%;display: inline;background-color: yellow;}</style></head><body><div id="parent"><div id="child1">child1</div><div id="child2">child2</div></div></body></html>

Adding side by side divs confusion

I always seems to get this simple HTML stuff wrong. I am currently trying to add side by side divs in the middle of a page on this test page I made:
http://www.comehike.com/hiking_dev.php
The code I added was something like this:
<div style="width: 460px; float: left; ">
<strong>Test hello</strong>
</div>
<div style="width: 300px; float: right; ">
<strong>Test hello 2</strong>
</div>
I added <strong> tags so you can spot it on the page better.
But do you see there is text that appears there that reads like this "When considering the injury risk of any" - but that text is in the <p> tag below. Why is it appearing there?
Is it better practice to wrap my 2 divs that I am trying to align, within another div?
After your two floating divs, add another empty div...
<div style="clear:both;"></div>
This will cause the two floating divs to push all subsequent content below them. As you have it now, there is 200 pixels of empty space after the first div allowing the other content to simply wrap around it.
Increasing the width of the floating divs may not be desirable for your layout so clear:both; is most typical for this situation.
Surround those two divs in a parent div with overflow set to hidden.
<div style="overflow:hidden;">
<div style="width: 460px; float: left; ">
<strong>Test hello</strong>
</div>
<div style="width: 300px; float: right; ">
<strong>Test hello 2</strong>
</div>
</div>
An alternative (as others have pointed out) is to use a third element:
<div style="clear:both;"></div>
It's debatable as to which is better. Usually, either is just fine. Here's a post about the topic:
Floated Child Elements: overflow:hidden or clear:both?
You'll either need to add a div below your two divs with clear:both; as others have suggested, or you could add clear:both; to the following <p> element.
Because you have an entire page width of 960px. You're combined div widths are 760px (400+300). If you add 200px to the second div you should be fine.
Edit: Because of padding, you can increase either of the divs by 150px and be fine.

Better way to make side-by-side DIVs in CSS

I have 2 DIV's that I want to be side-by-side under all circumstances. So far I am accomplishing it like this:
<div style="float: left">
<table> ... </table>
</div>
<div style="float: right; overflow: scroll; width: 1000px">
<pre> ... </pre>
</div>
However, I don't like that I have to specify an absolute width in the 2nd div.
I just want the 1st div to be the minimum width to display the table and 2nd div to take up the rest of the space without overflowing.
Is there a better way?
One way i've found quite versatile is to only float one of the divs. Float the left one and put that much padding on the right div. Here's an example of what i mean: http://jsfiddle.net/a6Bv8/ - i put one with an inner wrapper for borders or padding requirements to make it fluid, as well as the three column example..
#left { width:50%; float:left; }
#right { padding-left:50%; }
<div id="container">
<div id="left">
left left left
</div>
<div id="right">
right right right
</div>
</div>
This is nice, too, to do three columns. You can float the first div to the left and give it it's width ( say 200px ), float the right column to the right and set its width (say 200px ) and set the padding on the third div to padding-left:200px;padding-right:200px (or 210 if you want a gap ).
If you don't mind ignoring ie6&7, this will work nicely:
<div style="white-space:nowrap;">
<div style="display:inline-block;">
blah
</div>
<div style="display:inline-block;">
blah
</div>
<div style="clear:both;"></div>
</div>
There might be some ie hack that will make this work in that browser, check:
http://blog.mozilla.com/webdev/2009/02/20/cross-browser-inline-block/
When you say "rest of the space" what do you mean. If your table was suddenly 3000px, what should happen?
I think a solution might be to wrap them in a third div:
<div style="width: 1500px;">
<div style="float: left">
<table> ... </table>
</div>
<div style="float: right;">
<pre> ... </pre>
</div>
<div style="clear:both;"></div>
</div>