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>
Related
I am having some difficulty with some html code (I have never done html programming of any significance) where I am trying to do something fairly simple. Actually I broke it down to the simplest form for now. So I have three blocks on top of each other. The first block at the very top has three sub boxes within it horizontally. I fixed the height of this block at 250px since my text fits into it. However my second block (Center) overlaps with the Top div. How do I specify that the center div start after the Top div? I want it to display a few pixels below the Top div.
<div id="Report" style="height: auto">
<div id="Top" style="width:inherit; height:250px">
<div id="First" class="TopMostLeft" >
<span style="font-family:Calibri; font-size:small">Info</span>
<table style="width:100%" > ... </table>
<div id="Second" class="TopMostCenter">
<span style="font-family:Calibri; font-size:small">Info2</span>
<div id="Third" class="TopMostRight">
<div id="About" class="TopRightDiv">
<table style="width:100%">
</div>
<div id="Center" style="border:solid; border-width:2px; border-color:lightgray; padding:4px; margin:10px">
<div id="Bottom" style="border-width:2px;border-width:2px; border-color:lightgray; padding:4px; margin:10px">
</div>
Here's what you need. Create a stylesheet so we can style it much better.
Working Fiddle: https://jsfiddle.net/v9jgj7n3/
I created your layout. This is how I understand what you need.
HTML
<div id="Report">
<div id="Top">
<div id="First" class="TopMostLeft" ></div>
<div id="Second" class="TopMostCenter"></div>
<div id="Third" class="TopMostRight"></div>
</div>
<div id="Center"></div>
<div id="Bottom"></div>
</div>
CSS
#Top {
width: 100%;
display: flex;
height: 250px;
}
#Top #First {
width: 10%;
background: red;
}
#Top #Second {
width: 40%;
background: blue;
}
#Top #Third {
width: 50%;
background: yellow;
}
#Center {
height: 200px;
width: 100%;
background: gray;
}
#Bottom {
height: 80px;
width: 100%;
background: black;
}
Edit the width and height to your desired value. This is how it will work
Also, I notice that you didn't close the child element of Top. You must always close DIV, so the HTML code will run well. It breaks your code.
Hope it helps. Cheers! Good Morning from Philippines.
I'm at a project where I need all images within a div to be placed at the same place for an animation where I've put the images to be absolute to stack on top of each other though this interupts the rest of the code when scaling the page.
Example start -
HTML
<div class="a b">
<div class="c d">
<div class="e">
<img class="f" src="" alt="image"/>
</div>
</div>
<div class="c d">
Some content
</div>
</div>
CSS
.a {
clear: both;
padding: 0px;
margin: 0px;
width: 100%; }
.b:before,
.b:after {content:""; display: table; }
.b:after {clear:both; }
.c {
display: block;
float: left;
margin: 1% 0 1% 0%;
}
.d {
margin: 0;
padding: 0;
width: 50%;
}
.e {
position: relative;
margin: 100px auto;
width: 100%;
max-width: 640px;
height: auto;
max-height: 640px;
vertical-align: center;
}
.f {
position: absolute;
margin: 0;
padding: 0;
}
Example end -
As said this works great on fullscreen but when resizing the second class="c d" appears overlapped by the first class="c d" and I would like them to be stacked underneath eachother instead as the did before I created class="f", is there any way to do this with pure css?
to make child absolute within parent you need to wrap the child with div with position relative.
for elements with position set to relative or absolute there is no direct way to prevent them from over layering, you can prevent them by calculating left and top values.
a work around is to use a blocking div. do that wrap your absolute positioned element with normal div and set its height to a value suitable to your needs check this plunker.
note the div with .absolute-parent class
also note the div with .blocking-div class
check this plunker
https://plnkr.co/edit/dT1cC8YAY1ENYfhRvncs?p=preview
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<h1>Absolute Positioning</h1>
<div class="absolute-to-page">
to page
</div>
<div class="my-cont">
<div class="blocking-div">
<div class="absolute-parent">
<div class="absolute-to-parent">
to parent
</div>
<div class="absolute-to-parent obj-2">
object two
</div>
</div>
</div>
<div class="absolute-parent">
<p>Some other content</p>
</div>
<div>
<p>Some other content 2</p>
</div>
</div>
</body>
</html>
and the css code
/* Styles go here */
.my-cont{
border:1px solid blue;
min-height:400px;
margin-top:200px;
}
.absolute-to-page{
position:absolute;
width:40px;
height:40px;
background:green;
top:0;
}
.absolute-parent{
position:relative;
}
.absolute-to-parent{
position:absolute;
width:40px;
height:40px;
background:red;
top:0;
}
.obj-2{
left:50px;
}
.blocking-div{
height:40px;
}
I have this issue I can't find a solution for it:
I have 3 divs, two of them are located inside the third.
The div which contains the others has a percentage width.
The second one which is inside the first, doesn't have a specific width and is floated to the left.
The third which is also inside the first does have a specific width and is floated to the right.
The question is how would I make the second div take as much width as possible??
Because it fits the contents as default.
<div id="a">
<div id="b">
</div>
<div id="c">
</div>
</div>
<style>
#a{
width: 80%;
}
#b{
width: ??;
float:left;
}
#c{
width: 50px;
float:right;
}
</style>
arrange your divs like this
<div id="a">
<div id="c">456</div>
<div id="b">123</div>
</div>
and remove the float from #b
#b{
background-color:#06F;
}
check the jsFiddle file
Working jsFiddle Demo
You should put your fixed element before the other one:
<div id="a">
<div id="c">
FIXED ELEMENT
</div>
<div id="b">
FLEXIBLE ELEMENT
</div>
</div>
And in CSS:
#a {
width: 80%;
background: green;
overflow: hidden;
}
#c {
width: 50px;
float: right;
background: yellow;
}
#b {
margin-right: 50px;
background: pink;
}
Floats aren't a great choice for layout purposes, since that's not really what it was designed for. If all you're looking for is to have 2 elements side-by-side and not the other aspects of float, I recommend the table* display properties instead:
http://cssdeck.com/labs/tbarj05i
#a{
width: 80%;
display: table;
}
#b{
display: table-cell;
}
#c{
width: 50px;
display: table-cell;
}
I would suggest giving #C a percentage value instead of pixels, or find out the total width and set it to that minus 50px.
Also did you try width:100%?
width: 100% for B is his container's width, hope this illustrates:
<html>
<head>
<style>
div{ border: solid 1px #ccc;}
#a{
width: 80%;
}
#b{
width: 100%;
float:left;
}
#c{
width: 50px;
float:right;
}
</style></head><body>
<div id="a">
<div id="b">DIV B
</div>
<div id="c">DIV C
</div>
</div>
</body>
</html>
I'm new in web design. I want to design 2 box that one of them is in the left and another one is in the right. The boxes are fix in browser maximize state, but when I resize the browser and make it minimize, right box go down of the left box.
Here is my code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" >
<link type="text/css" rel="stylesheet" href="style.css" />
<title>.: Home :.</title>
</head>
<body>
<div class="main" >
<div class="left" > </div>
<div class="right" >
<div class="search" > </div>
<div class="login" > </div>
</div>
</div>
</body>
</html>
style.css
body {
margin: 0px;
padding: 0px;
background-color: #c4c4c4;
}
div.main {
width: 100%;
display: inline-block;
background-color: red;
}
div.left {
float: left;
width: 300px;
height: 500px;
margin-top: 50px;
margin-left: 100px;
display: inline-block;
background-color: blue;
}
div.right {
float: right;
width: 800px;
height: 500px;
margin-top: 50px;
margin-right: 100px;
display: inline-block;
background-color: green;
}
You need fixed width on your main DIV
div.main {
width: 1350px;
display: inline-block;
background-color: red;
}
Use id where possible instead class, it's faster eg: class="main" could be an ID.
WORKING DEMO
EDIT
If you want 100% width on main div then use a wrapper div with fixed width:
<div class="main" >
<div id="wrapper" style="width:1350px;">
<div class="left" > </div>
<div class="right" >
<div class="search" > </div>
<div class="login" > </div>
</div>
</div>
</div>
Updated DEMO with 100% main DIV
The reason for this is that your boxes are of fixed width, with margins. If you resize the browser window so it is smaller than the amount of space required to show both boxes side-by-side, then the right box will display below the left box, where it has space.
There is no fix for this from the details in your description. However, you should try basing your layout on percentages (e.g. width:25%).
Change div.main width from % to px. Also you can set a min-width so that browser does not reduce the element before that.
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/