This question already has answers here:
How to make a stable two column layout in HTML/CSS
(6 answers)
Closed 4 months ago.
I'm trying to make a simple two-column layout in HTML/CSS; after consulting some resources, I'm still getting the two divs that should be side-by-side rendering as one below the other.
<div id="columns" style="width: 100%;">
<div id="left" style="float: left; width: 60%;">
<button id="testBtn">show</button>
<div id="output" style="white-space: pre-line">
Content goes here
</div>
<div>
<div id="right" style="float: left; width: 40%;">
<div id="input">
input displayed here
</div>
</div>
</div>
These are some of the links I've consulted:
Simple two column html layout without using tables
https://www.w3schools.com/howto/howto_css_two_columns.asp
I've tried several variations, but so far I'm not getting a two-column layout. When I set the "input" div to "float:right", it appeared indented to the right but was still below the "output" div instead of beside it. Am I missing something?
Your HTML is invalid. Instead of a closing </div> tag for #left, you have an opening <div> tag.
Try this:
<div id="left" style="float: left; width: 60%;">
/* content goes here... */
</div>
Here is a fiddle demonstrating the modified markup: https://jsfiddle.net/djc87tLc/
Add display:inline-block; box-sizing:border-box; in both the divs and it will work.
display:inline-block;
This will keep the elements inline and box-sizing:border-box; will keep the element's width to your defined width by including any padding or border inside it.
Hope this helps.
Related
This question already has answers here:
Align inline-block DIVs to top of container element
(5 answers)
Why is this inline-block element pushed downward?
(8 answers)
Closed 2 years ago.
<div style="background-color: black;width: 100%;height: 300px;margin-bottom: 30px;">
<div style="width: 30%;background-color: green;height: 100%;display:inline-block;">
ddsddsd sd sd sddsa
</div>
<div style="width: 30%;background-color: yellow;height: 100%;display: inline-block;">
</div>
</div>
I have added a small text inside the green inner DIV tag .suddenly it moved to the down.
The same issue happens even when I add another div tags inside that inner div tag.
If I remove that inner text then this green div tag will act normal just like that yellow tag.
I am not understanding why. Why HTML is acting illogically.. I don't think this has any logical reason.. I feel like quitting HTML..
This is because inline-block comes with another handy property called vertical-align and by default, your boxes are not vertically set. So by giving them both vertcial-align: middle will solve your issue.
<div style="background-color: black;width: 100%;height: 300px;">
<div style="width: 30%;background-color: green;height: 100%;display:inline-block; vertical-align:middle;">
ddsddsd sd sd sddsa
</div>
<div style="width: 30%;background-color: yellow;height: 100%;display: inline-block; vertical-align:middle;">
</div>
</div>
Wroking Fiddle
The div tag in HTML by default gives a margin on all 4 sides of the text and you need to normalize the margin using css.
{
margin: 0;
}
Also to make sure there is no padding too you can modify your css code to
{
margin: 0;
padding:0;
}
I have a web page which has length of 2000px, but I want to divide it into 4 different sections (ie. 500px each) so I can add different content there with different design. But I have no idea how to do it. I would like to give hyperlinks of them also.
Sounds like you need some fundamentals.
The structure of your page is HTML, while stylistic elements are dictated in CSS. So you'll want four logical divisions (a.k.a. <div></div>) inside of a containing <div></div>, like this:
<div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
A div is something called a block level element, which will automatically expand to the full width (ie: 100%) of its container. You want the inner div elements to take of equal width, and since there's four of them you do some math.
100%/4 = the width you want each div to be.
<div>
<div style="width:25%;"></div>
<div style="width:25%;"></div>
<div style="width:25%;"></div>
<div style="width:25%;"></div>
</div>
You'll notice this doesn't work as expected since the div elements will be the width you want but only stack on top of each other. To get them next to each other, you can use display:inline-block; which changes the block level to something between block and inline.
<div>
<div style="width:25%; display:inline-block;"></div>
<div style="width:25%; display:inline-block;"></div>
<div style="width:25%; display:inline-block;"></div>
<div style="width:25%; display:inline-block;"></div>
</div>
This will be almost what you want, except you will notice some gaps between the div elements, which is actually white space being preserved in the HTML code (the line breaks between the <div></div>). There are several ways of getting rid of this. In my opinion, the easiest is to put a blank comment between the elements, like this:
<div>
<div style="width:25%; display:inline-block;"></div><!--
--><div style="width:25%; display:inline-block;"></div><!--
--><div style="width:25%; display:inline-block;"></div><!--
--><div style="width:25%; display:inline-block;"></div>
</div>
This is using CSS styles inside the HTML elements, but you should really put CSS in a stylesheet and reference it in the page.
a terrible answer is frames; a moderately bad answer is css divs
<div class="bottom">
<div id="area1" style="float: left; width: 25%;"></div>
<div id="area2" style="float: left; width: 25%;"></div>
<div id="area3" style="float: left; width: 25%;"></div>
<div id="area4" style="float: left; width: 25%;"></div>
</div>
now when you say hyperlinks.. do you mean as in you click the mini part of the page and it expands to that part of it? because you will probably have to do some jquery hack for it
$("#area1").click(function(){
$("#area1").css("width", "100%");
$("area2").css("width", "0%");
$("area3").css("width", "0%");
$("area4").css("width", "0%");
});
(the above should resize the clicked div for the quarter you clicked on to 100 while shrinking the others. you would then style the individual div in the css for it by id or class etc.
easy way for you to use bootstrap that provides already make columns and with responsive functionality.IF you don't want to use next option is we can use css or frames.like as above answer
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;
}
I have a fluid layout made with collapsible divs. When they collapse, they leave an empty space underneath, which is automatically filled by the next div (they all have float: left). This however does not look good and I would like to maintain the "row structure" without loosing the ability to move the divs around (when the window gets smaller). JSFiddle here.
CSS snippet:
.clickable {
border: 1px dotted black;
width: 200px;
float: left;
height:50px;
margin-right:20px;
margin-bottom:20px;
}
HTML snippet:
<html>
<head><title>Layout test</title></head>
<body>
<div class="clickable"> 1 </div>
<div class="clickable"> 2 </div>
<div class="clickable"> 3 </div>
<div class="clickable"> 4 </div>
<div class="clickable"> 5 </div>
<div class="clickable"> 6 </div>
</body>
<html>
Is there a pure CSS solution? I would like not to mess with JavaScript. I know I can dynamically determine the number of columns and then wrap them into "rows", but I'm not willing to use this solution yet.
Change your float: left to display: inline-block. That's the only change I made to your fiddle, and seems to give the effect you're looking for.
http://jsfiddle.net/GLf7m/2/
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.