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.
Related
My code structure looks like this
<div style="height: 100px;
Width: 200px;"> <!-- Container -->
<div style="float: left;
height: 50px;
Width: 100px;
background-color: red;">
</div>
<div style="float: left;
height: 50px;
Width: 100px;
background-color: blue;">
</div>
<div style="float: right;
height: 50px;
Width: 100px;
background-color: green;">
</div>
</div>
But the right position of elements should look like this:
┌──────┬──────┐
│ red │green │
├──────┼──────┘
│ blue │
└──────┘
I cannot change or add any additional code, the only way is with CSS.
How should I float the divs to be in the right order as I mentioned above?
Edit: My code doesn't and can't contain div with clear.
you dont need floating for that. disable all floating using !important to override the inline styles, and then use :nth-of-type() to select the green div and position it absolutely with right and top equal 0;
div {
position: relative;
}
div > div{
float: none !important;
}
div > div:nth-of-type(3) {
position: absolute;
right: 0;
top:0;
}
<div style="height: 100px; Width: 200px;">
<!-- Container -->
<div style="float:left; height: 50px; Width:100px; background-color:red;">
</div>
<div style="float:left; height: 50px; Width:100px; background-color:blue;">
</div>
<div style="float:right; height: 50px; Width:100px; background-color:green;">
</div>
</div>
You can use clear: left on the blue box to push it down and then use negative margin on the green box to push it up.
<div style="height: 100px; Width: 200px;">
<!-- Container -->
<div style="float:left;height: 50px;
width:100px; background-color:red;">
</div>
<div style="float:left;clear:left;
height: 50px; Width:100px; background-color:blue;">
</div>
<div style="float:left; height:50px;
width:100px; background-color:green;margin-top:-50px;">
</div>
</div>
Well this is more like a puzzle instead of a legit question but here goes.
With the proper use of margins and positions in addition to assigning null to clear property one can accomplish your scenario.
<div style="height: 100px; Width: 200px;">
<!-- Container -->
<div style="float:left; height: 50px; Width:100px; background-color:red;"></div>
<div style="float: right; height: 50px; margin-top: 50px;Width:100px; background-color:blue;position: absolute;"></div>
<div style="clear: none;"></div>
<div style=" height: 50px; margin-left: 100px;margin-bottom: 50px;Width:100px; background-color:green;"></div>
</div>
</div>
Keeping the same HTML structure, you could select the divs in CSS using :nth-child(N). In this case you'd just need to update the blue (2) and green (4) boxes, and the one with the clear:both style (3):
div > div:nth-child(2) {
margin-top: 50px;
}
div > div:nth-child(3) {
display: none;
}
div > div:nth-child(4) {
margin-top: -100px;
}
<div style="height: 100px; Width: 200px;">
<!-- Container -->
<div style="float:left; height: 50px; Width:100px; background-color:red;">
</div>
<div style="float:left; height: 50px; Width:100px; background-color:blue;">
</div>
<div style="clear:both;"></div>
<div style="float:right; height: 50px; Width:100px; background-color:green;">
</div>
</div>
Notice that this will work for this particular example. It would be ideal if the container div had an id and use that instead of div >.
For a more generic solution that would work independently of the height of the boxes, you could use transform:translate() like this:
div > div:nth-child(2) {
transform:translate(0%, 100%);
}
div > div:nth-child(3) {
display:none;
}
div > div:nth-child(4) {
transform:translate(0%, -100%);
}
As you can see on this JSFiddle: http://jsfiddle.net/eekhjv3n/1/
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;
}
I'm making a web site responsive, and on the home page I should insert two "containers" that should be centered and aligned. (containers in this case are two divs with inside images and text)
I wish they would behave in this way
and when the page is "restricted", the two divs should position itself in this way
I tried like this, but it is not exactly what I would get
<div style="">
<div style="width: 300px;float: left;">
div 1
</div>
<div style="width: 300px;float: left;">
div 2
</div>
</div>
I'd try to use display: inline-block property. In this way you don't have to apply 'overflow' for parent and it's pretty easy to make blocks centered.
HTML:
<div class="wrapper">
<div class="box">Div 1</div>
<div class="box">Div 2</div>
</div>
CSS:
.wrapper {
text-align: center;
/* Just decoration */
border: 1px solid blue;
padding: 20px;
}
.wrapper .box {
display: inline-block;
width: 300px;
height: 50px;
/* Just decoration */
border: 1px solid green;
}
Take a look at the fiddle http://jsfiddle.net/caprella/y4BQ3/
I put something quick together for you. You will have to use media queries to find the size of the page when you want the style to switch. Mess around with my example and you should be able to figure something out to your liking.
<div id="box">
<div class="innerBox">
div 1
</div>
<div class="innerBox">
div 2
</div>
<div class="clear"></div>
</div>
And the CSS...
#box {
width:88%;
background:red;
padding:20px 6%;
}
.clear{clear:both}
.innerBox {
width:41%;
float:left;
background:blue;
display:block;
}
.innerBox:first-child {
margin-right:18%;
}
#media screen and (max-width: 400px) {
#box .innerBox {
float:none;
width:100%;
margin:20px 0 0 0;
}
#box .innerBox:first-child {
margin-top:0;
}
}
}
JsFIddle link: http://jsfiddle.net/x3JLX/
Check out this Fiddle. There's only a few simple changes to your existing code, which I included below.
http://jsfiddle.net/ArKKG/
<div style="overflow:auto; height: 100% text-align: center;">
<div style="width: 300px; height: 50px;float: left;">
div 1
</div>
<div style="width: 300px;height: 50px;float: left;">
div 2
</div>
</div>
And some CSS to make them visible, and keep the borders separated.
div{
border: 1px solid black;
margin: 4px;
}
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 having some trouble finding the way to create 3 DIVs side by side, where the middle DIV has a static size (let's say 900px), and the ones on the left and right side have auto-adjustable widths.
I need to do this in order to put backgrounds on the side DIVs, because the middle div already has a transparent background, so I cannot create a wrapper DIV for the middle one holding the other background. As you might imagine, you'll be able to see through the middle DIV's background.
Any ideas? :)
Is this you want?
HTML:
<div class="wrapper">
<div class="side" style="float:right;width:50px;">side</div>
<div class="side" style="float:left;width:50px;">side</div>
<div class="middle" style="margin:0 50px;">content middle</div>
<div style="clear:both; height: 40px;"></div>
<div id="container">
<div class="left">side</div>
<div class="center">center</div>
<div class="right">side</div>
</div>
</div>
CSS:
.wrapper {
max-width: 1000px;
}
.side, .middle {
text-align: center;
}
.side {
background: red;
}
.middle {
background: blue;
color: white;
}
#container {
display: table;
width: 100%;
}
.left, .center, .right {
display: table-cell;
text-align: center;
background: red;
}
.center {
width: 500px;
background: blue;
color: white;
}
jsfiddle
I am guessing you need a website with 3 columns where the left one is the menu, the middle has the content and the right one has room for advertisement or additional information.
I would go for something like:
<div class="side" style="width:10%; float:left;">content</div>
<div class="middle" style="width:900px; float:left;">content middle</div>
<div class="side" style="width:10%; float:left; clear:both; ">content</div>
Depending on size and placement use the side classes for the sidebars and the middle class for your main content.