I have this HTML code:
<body>
<div id="div0" style="display:inline; background-color:green; width:100%">
<div id="div1" style="display:inline; background-color:aqua;width:33%"> </div>
<div id="div2" style="display:inline; background-color:red;width:33%"> </div>
<div id="div3" style="display:inline; background-color:yellow;width:33%"> </div>
</div>
</body>
I want to fill the page with div1, div2 and div3 but they don't fill the entire width.
What it's happening?
Taken from display declaration:
display: inline means that the element
is displayed inline, inside the
current block on the same line. Only
when it's between two blocks does the
element form an 'anonymous block',
that however has the smallest possible
width.
You cannot give an inline element set width or height dimensions, they will be ignored. An element must have a display type of block to do that. Setting display: block however will not achieve what you want since each element will fill the entire width. float: left will cause them to stack to the left and also forces display: block.
<head>
<style type="text/css">
#wrap {
width:100%;
}
#wrap:after {
/* Prevent wrapper from shrinking height,
see http://www.positioniseverything.net/easyclearing.html */
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
#wrap .container {
float: left;
width:33%;
}
</style>
</head>
<body>
<div id="wrap">
<div class="container"> </div>
<div class="container"> </div>
<div class="container"> </div>
</div>
</body>
Mmmmm, semantics
See answer from Phunky for further comments on floating.
Use relative positioning on the outer <div> and float the inner <div>s. Don't use display: inline.
<body>
<div id="div0" style="border: 1px solid red; background-color: green; width: 100%; position: relative;">
<div id="div1" style="background-color: aqua; width: 33.33%; float: left;">a</div>
<div id="div2" style="background-color: red; width: 33.33%; float: left;">b</div>
<div id="div3" style="background-color: yellow; width: 33.33%; float: left;">c</div>
</div>
</body>
display:inline shrink wraps the content. You might want to try float:left instead.
Rory Fitzpatrick more or less has the ideal answer for you, although there is no need to set pos:rel on the #wrapper as it is already a relative block element and will span the full width by default.
When you float a block element it mimics the alignment functionality of display:inline and in an ideal world we would have access to the very useful display:inline-block which would have done exactly what you was expecting it to do.
But one thing you should remember when floating elements is that they will only take up the space they require (this includes margin and padding) unless you set a fixed width.
This is why Rory used width:33%; as that is the best you are ever going to get :)
Ideally this would have been a comment on Rorys post, but i've not got a high enough post count yet.
<body>
<div id="div0" style="float: left; background-color:green; width:100%">
<div id="div1" style="float: left; background-color:aqua;width:33%"> </div>
<div id="div2" style="float: left; background-color:red;width:33%"> </div>
<div id="div3" style="float: left; background-color:yellow;width:33%"> </div>
</div>
</body>
This should work for you. And the reason IIRC is that display: inline does not take % width.
Instead of using float you could use flexbox for a more responsive resizing. Also this forces the elements to remain in a row.
Example:
<head>
<style type="text/css">
#wrap {
width:100%;
display:inline-flex;
}
#wrap:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
display: inline-flex;
flex-direction: row;
}
.container1 {
width:20%;
}
.container2{
width:80%;
}
</style>
</head>
<body>
<div id="wrap">
<div class="container1"> </div>
<div class="container2"> </div>
</div>
The best way to accomplish this, contrary to all the answers given before, can be found referencing the answer to this question:
3 inline-block divs with exactly 33% width not fitting in parent
The quickest and easiest way is not the prettiest to look at (putting your div's on the same line to remove the automatic single white space provided normally), but will work tremendously for what you want. The answer I am referencing list plenty of other way that, in my opinion, are better than any provided before, and address the true problem you are having.
Here is the code working exactly how you'd like, and a link to the fiddle!
<body>
<div id="div0" style="float: left; background-color:green; width: 100%;">
<div id="div1" style="margin: 0px; display: inline-block; background-color:aqua;width:33.33%"> </div><div id="div2" style="margin: 0px; display: inline-block; background-color:red;width:33.33%"> </div><div id="div3" style="margin: 0px; display: inline-block; background-color:yellow;width:33.33%"> </div>
</div>
https://jsfiddle.net/stopitdan/uz1zLvhx/
Related
I'm trying to make the following pattern in HTML:
CellA CellB
CellC
CellD CellE
CellF
I'm trying to use a mixture of divs and spans to do this. I make CellC inside of a div since browsers always place line breaks before and after the div (Source). I also give this div the CSS property float: right so that it will appear to the right (like shown above). Making it float right is working, but I think by doing this I'm removing the default property of the div, which I believe is display: block, which puts in the line breaks. Even if I add this property in manually, it has no affect.
Here is the code I'm trying out (Along with a fiddle):
HTML
<div>CellA
<span class="floatRight">CellB</span>
</div>
<div class="both">
CellC
</div>
<div>CellD
<span class="floatRight">CellE</span>
</div>
<div class="both">
CellF
</div>
CSS
.floatRight { float:right;}
.both {float: right; display: block;}
The code above will cause my output to look like this:
CellA CellB
CellD CellECellC
CellF
Add following style to both class
.both {
float: right;
display: block;
width: 100%;
text-align: right;
}
Adding another solution to your problem, you can use flexbox to do this.
Try this:
html:
<div class="flex-container">
<div class="item">CellA</div>
<div class="item">CellB</div>
<div class="item">CellC</div>
<div class="item">CellD</div>
<div class="item">CellE</div>
<div class="item">CellF</div>
</div>
css:
.flex-container {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
width: 100%;
}
.item:nth-child(3n) {
width: 100%;
text-align: right;
color: red;
}
Demo
But if you can't use flexbox, the #Jaspreet Singh answers its correct.
If you can change the HTML structure, then this approach will be easy for you:
HTML
<div class="clearfix">
<div class="left">
Cell A
</div>
<div class="right">
<div>
Cell B
</div>
<div>
Cell C
</div>
</div>
</div>
<div class="clearfix">
<div class="left">
Cell D
</div>
<div class="right">
<div>
Cell E
</div>
<div>
Cell F
</div>
</div>
</div>
CSS:
.right {
float: right;
}
.left {
float: left;
}
.clearfix:after {
content: "";
clear: both;
display: block
}
Demo: https://jsfiddle.net/j0eqtzn2/2/
Why are you using float? If there is no "good" reason to use float, because float removes the element from the flow of the design.
Try using display inline-block instead.
<html>
<head>
<title>foo</title>
<style>
.left {
width: 45%;
display: inline-block;
background-color: #0ff;
}
.right {
width: 45%;
display: inline-block;
background-color: #f00;
}
</style>
</head>
<body>
<div>
<div class="left">CellA</div> <div class="right">CellB</div>
<div class="left"></div> <div class="right">CellC</div>
<div class="left">CellD</div> <div class="right">CellE</div>
<div class="left"></div> <div class="right">CellF</div>
</div>
</body>
</html>
if you use DL here instead of DIV then it will be easy for you. because it's look like title and description
Here is the demo
[check demo here][1]
[1]: https://jsfiddle.net/j0eqtzn2/6/
My question is about CSS and DIV tags. I have a dynamic page, and I would like one container DIV. There are two scenarios: in one case, this container DIV will just have one DIV in it, with a width of 50%, and should be centered. In the other case, there will be two DIVs in it, and they should be side by side, each taking up 50%.
I have tried float:center (using overflow: hidden on the container DIV), and that works for 1 DIV in it, but with two, they are stacked on top of each other. If I use float: left, then the 2 DIVS appear correct, but the single DIV is left aligned, not centered.
Any help on how to achieve this effectively would be greatly appreciated!
<div style="width:800; margin: 2px; background-color:blue">
<div style="width:50%; background-color:orange;">
Text
</div>
<div style="width:50%; background-color:red;">
Text
</div>
</div>
jsFiddle
For the two-div scenario:
<div style="width:800; margin: 2px; background-color:blue; display: table;">
<div style="background-color:orange; display: table-cell;">
Text
</div>
<div style="background-color:red; display: table-cell;">
Text
</div>
</div>
Now for the one-div scenario:
<div style="width:800; margin: 2px; background-color:blue; display: table;">
<div style="background-color:orange; display: table-cell;">
Text
</div>
</div>
In each case, the inner divs, whether there are 1 or 2, will take up a combined 100% of the outer div. Essentially, it acts like the <table> element without having the semantics of a <table>.
check this fiddle
HTML
<div class="wrapper">
<div class="divholder">
<div style="background-color:orange;">DIV 1</div>
<div style="background-color:red;">DIV 2</div>
</div>
</div>
CSS
.divholder div{
display:inline-block;
margin:auto;
width:49%;
}
.divholder {
text-align:center;
margin: 0 auto;
position:relative;
}
.wrapper{
width:100%;
background-color:blue;
}
This perfectly deals with your need..While there is only one div, the div gets centered and if two divs come then both will be equally divided and floated left.Please see the fiddle..
Similar to chharvey's answer, this can be achieved nicely with display: table;
In my example it is centered horizontally and will work with any number of columns as they will fit themselves to the full width of div.wrap. The columns are currently given a height of 100%, this can be adjusted.
Have a jsBin example!
HTML
<div class="wrap">
<div class="column">
</div>
<div class="column">
</div>
</div>
CSS
html,body {
height: 100%;
}
.wrap {
display: table;
width: 800px;
height: 100%;
margin: 0 auto;
}
.column {
display: table-cell;
background: #FF0;
}
.column:first-child {
background: #F00;
}
Sorry, I'm sure this question has been asked before, but if there anyway to do the following:
I have three divs in-line like the diagram shown below, when the browser window is shrunk it automatically drops each div to the next line. I know that I could use the #media command and assign a different css stylesheet if the browser is a certain size, but it would be great if I could make it fluid.
Before:
After:
Thank you!
Wrap the divs in a container element, like....
<div class="wrapper">
<div id="elem1"></div>
<div id="elem2"></div>
<div id="elem3"></div>
</div>
Then make sure .wrapper has a set width, most likely a percentage. If it has a set width and the inline elements are all floated left, once there is no longer room within the .wrapper div, they'll shift to the next line.
Try:
<div class='box'></div>
<div class='box'></div>
<div class='box'></div>
and:
.box {
background: #000;
width: 300px;
height: 300px;
float: left;
}
They should automatically drop when below 900px, see: http://jsfiddle.net/JQFH7/
Elements into it
<div id="wrapper">
<div class="inner"></div>
<div class="inner"></div>
<div class="inner"></div>
<div>
CSS
.inner
{
width: 100px;
height: 100px;
display: inline-block;
background: black;
}
div#wrapper
{
width: 100%;
text-align: center;
}
JSFiddle
I am creating a sample website which has three divisions horizontally.
I want the left most div to be 25% width, the middle one to be 50% width, and right to be 25% width so that the divisions fill all the 100% space horizontally.
<html>
<title>
Website Title
</title>
<div id="the whole thing" style="height:100%; width:100%" >
<div id="leftThing" style="position: relative; width:25%; background-color:blue;">
Left Side Menu
</div>
<div id="content" style="position: relative; width:50%; background-color:green;">
Random Content
</div>
<div id="rightThing" style="position: relative; width:25%; background-color:yellow;">
Right Side Menu
</div>
</div>
</html>
http://imgur.com/j4cJu
When I execute this code, the divs appear over each other. I want them to appear beside each other!
How can i do this?
I'd refrain from using floats for this sort of thing; I'd rather use inline-block.
Some more points to consider:
Inline styles are bad for maintainability
You shouldn't have spaces in selector names
You missed some important HTML tags, like <head> and <body>
You didn't include a doctype
Here's a better way to format your document:
<!DOCTYPE html>
<html>
<head>
<title>Website Title</title>
<style type="text/css">
* {margin: 0; padding: 0;}
#container {height: 100%; width:100%; font-size: 0;}
#left, #middle, #right {display: inline-block; *display: inline; zoom: 1; vertical-align: top; font-size: 12px;}
#left {width: 25%; background: blue;}
#middle {width: 50%; background: green;}
#right {width: 25%; background: yellow;}
</style>
</head>
<body>
<div id="container">
<div id="left">Left Side Menu</div>
<div id="middle">Random Content</div>
<div id="right">Right Side Menu</div>
</div>
</body>
</html>
Here's a jsFiddle for good measure.
I know this is a very old question. Just posting this here as I solved this problem using FlexBox. Here is the solution
#container {
height: 100%;
width: 100%;
display: flex;
}
#leftThing {
width: 25%;
background-color: blue;
}
#content {
width: 50%;
background-color: green;
}
#rightThing {
width: 25%;
background-color: yellow;
}
<div id="container">
<div id="leftThing">
Left Side Menu
</div>
<div id="content">
Random Content
</div>
<div id="rightThing">
Right Side Menu
</div>
</div>
Just had to add display:flex to the container! No floats required.
You can use floating elements like so:
<div id="the whole thing" style="height:100%; width:100%; overflow: hidden;">
<div id="leftThing" style="float: left; width:25%; background-color:blue;">Left Side Menu</div>
<div id="content" style="float: left; width:50%; background-color:green;">Random Content</div>
<div id="rightThing" style="float: left; width:25%; background-color:yellow;">Right Side Menu</div>
</div>
Note the overflow: hidden; on the parent container, this is to make the parent grow to have the same dimensions as the child elements (otherwise it will have a height of 0).
Easiest way
I can see the question is answered , I'm giving this answer for the ones who is having this question in future
It's not good practise to code inline css , and also ID for all inner div's , always try to use class for styling .Using inline css is a very bad practise if you are trying to be a professional web designer.
Here in your question
I have given a wrapper class for the parent div and all the inside div's are child div's in css you can call inner div's using nth-child selector.
I want to point few things here
Do not use inline css ( it is very bad practise )
Try to use classes instead of id's because if you give an id you can use it only once, but if you use a class you can use it many times and also you can style of them using that class so you write less code.
Codepen link for my answer
https://codepen.io/feizel/pen/JELGyB
.wrapper {
width: 100%;
}
.box {
float: left;
height: 100px;
}
.box:nth-child(1) {
width: 25%;
background-color: red;
}
.box:nth-child(2) {
width: 50%;
background-color: green;
}
.box:nth-child(3) {
width: 25%;
background-color: yellow;
}
<div class="wrapper">
<div class="box">
Left Side Menu
</div>
<div class="box">
Random Content
</div>
<div class="box">
Right Side Menu
</div>
</div>
You add a
float: left;
to the style of the 3 elements and make sure the parent container has
overflow: hidden; position: relative;
this makes sure the floats take up actual space.
<html>
<head>
<title>Website Title </title>
</head>
<body>
<div id="the-whole-thing" style="position: relative; overflow: hidden;">
<div id="leftThing" style="position: relative; width: 25%; background-color: blue; float: left;">
Left Side Menu
</div>
<div id="content" style="position: relative; width: 50%; background-color: green; float: left;">
Random Content
</div>
<div id="rightThing" style="position: relative; width: 25%; background-color: yellow; float: left;">
Right Side Menu
</div>
</div>
</body>
</html>
Also please note that the width: 100% and height: 100% need to be removed from the container, otherwise the 3rd block will wrap to a 2nd line.
Get rid of the position:relative; and replace it with float:left; and float:right;.
Example in jsfiddle: http://jsfiddle.net/d9fHP/1/
<html>
<title>
Website Title </title>
<div id="the whole thing" style="float:left; height:100%; width:100%">
<div id="leftThing" style="float:left; width:25%; background-color:blue;">
Left Side Menu
</div>
<div id="content" style="float:left; width:50%; background-color:green;">
Random Content
</div>
<div id="rightThing" style="float:right; width:25%; background-color:yellow;">
Right Side Menu
</div>
</div>
</html>
I'm using a table for the footer of my web page. I really don't know much about tables because I've always used CSS. The following is the only table I've ever made. It seems to work in Opera, Chrome, and Firefox, but everything goes to the left in IE. I'm not sure what I'm doing wrong with the table because I don't know much about tables. Here is the HTML:
<div id="framecontentBottom">
<div id="container">
<div id="row">
<div id="left">
<!-- Counter Code START --><img src="http://www.e-zeeinternet.com/count.php?page=760915&style=LED_g&nbdigits=4&reloads=1" alt="Web Counter" border="0" ><br>Page Views<!-- Counter Code END -->
</div>
<div id="middle">
Contact me at jacksterdavis<img src="images/#white.png">gmail.com
</div>
<div id="right">
<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_default_style ">
<a class="addthis_button_preferred_1"></a>
<a class="addthis_button_preferred_2"></a>
<a class="addthis_button_preferred_3"></a>
<a class="addthis_button_preferred_4"></a>
<a class="addthis_button_compact"></a>
<a class="addthis_counter addthis_bubble_style"></a>
</div>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=ra-4f302421558e3fc2"></script>
<!-- AddThis Button END -->
</div>
</div>
<div id="row">
<div id="left">
</div>
<div id="middle">
<p>The internet is the printing press of the 21'st century.</p>
</div>
<div id="right">
</div>
</div>
And here is the CSS:
#container {
display: table;
width: 100%;
}
#row {
display: table-row;
}
#middle {
width:50%;
text-align:center;
display: table-cell;
}
}
#left
{
width:25%;
text-align:left;
display: table-cell;
}
#right
{
width:25%;
text-align:right;
display: table-cell;
padding: 5px;
}
#quote
{
text-align:center;
width:100%;
}
#logoBtm
{
align:middle;
text-align:center;
}
#logoBtmLeft
{
align:left;
}
#logoBtmRight
{
align:right;
}
#framecontentBottom{
clear: both;
position: relative;
z-index: 10;
margin-top: -3em;
top: auto;
bottom: 0;
height: 80px; /*Height of bottom frame div*/
overflow: hidden; /*Disable scrollbars. Set to "scroll" to enable*/
background-color: #585858;
color: white;
width: 100%;
}
If you point out everything wrong with my table it's appreciated, thanks. A CSS fix would be the best but if the HTML must be edited it's fine.
the problem most likely lies in the fact that you have two divs with the same id. use classes for row instead.removed for the comfort of others. This line doesnt help the solution at hand.
also, in referring to your comment, ie 7 does not support table display CSS.
http://caniuse.com/#search=table-cell
use a combination of inline block or float. but beware, as inline block has its own issues with ie7
http://flipc.blogspot.com/2009/02/damn-ie7-and-inline-block.html
Here is a working, valid, example.
http://jsfiddle.net/mRHnW/2/
A couple changes: Ive styled every div inside of .row so that it gets applied once (and if it needs to be fixed, it can be, in one place. Even in CSS, it needs to be DRY.
I removed the margin-top from the #frameContentBottom selector because it was screwing with jsfiddle giving me visible results. Feel free to re-instate it if its important to your layout.
I adjusted the width of your 'columns' to be slightly less than 100%, because you've also included padding. The way the CSS Box Model as specified by W3C works is that the width declaration does not include padding, border, and margin. Thus, if you're creating a 100% div, and want 5px padding, then you need to specify less than 100% to get the padding within the 100% confines.
On a sufficiently wide screen (something bigger than jsfiddle default panes), your footer should look about what you expect.