I have some HTML codes like
<div id="top" style="height: 50px"></div>
<div id="bottom" style="height: 50px"></div>
<div id="content">Here goes some text</div>
I want the middle div (#bottom) to be positioned on top of the div (#top) and while doing so, the #content div should automatically move up by 50px.
If i code like
<div id="bottom" style="height: 50px; position: relative; top: -50px;"></div>
the #bottom div do moves up but the #content div stays behind.. leaving a 50px gap between.
So how should I position it??
If I'm understanding correctly, you want to take #bottom and remove it from the regular page flow, placing it over-top-of #top.
Two ways to take an element out of the regular page flow are position:float; and position:absolute;
Not knowing what the rest of your page looks like I suggest something like:
<div id='container' style='position:relative'>
<div id="top" style="height: 50px"></div>
<div id="bottom" style="height: 50px; position:absolute; top:0em; left:0em;"></div>
<div id="content">Here goes some text</div>
</div>
That will put #bottom in the top, left-hand corner of #container, which is also where #top will be. #container being part of the regular page flow will be right below #top.
For centering an absolutely positioned element you can do like this:
<div style="display:table; margin: 0 auto;"> <!-- display:table; to 'shrink-wrap' the div - margin: 0 auto; to center it->
<div style="position: relative; float:left;"> <!-- float also shrink-wraps -->
<div id='top'>top div content</div>
<div id='bottom' style="position:absolute; top:0em; width:100%; text-align:center;"> content of bottom div </div>
<div id='content'></div>
</div>
</div>
Related
I appreciate this maybe a simple question but I cannot find the answer.
I have a div. Inside that div I have 3 columns (made up of divs).
The 1st div has some text in it and the 3rd div had some text in it as well. I want the middle div to take up all the remaining space.
I have played around with absolute,fixed and relative positions.
This is what I mean:
<div id="divheader">
<div style="float: left; width: 85px;">Caption to the left</div>
<div style="float: left; width: 100%;">this div has no caption but I want it to take up the remaining space</div>
<div style="float: left; width: 185px;">caption to the right</div>
</div>
<div id="divpage">
stuff
</div>
<div id="divfooter">
footer stuff
You could float the last div right and not worry about having a div in the middle if you are not using it for any purpose.
<div>
<div style="float: left; width: 85px;">Caption to the left</div>
<div style="float: right; width: 185px;">caption to the right</div>
</div>
You can use the table-cell display for this exact purpose.
HTML:
<div class="divided">
<div style="width: 85px;">Caption to the left</div>
<div>this div has no caption but I want it to take up the remaining space</div>
<div style="width: 185px;">caption to the right</div>
</div>
CSS:
.divided {
display: table;
}
.divided > div {
display: table-cell;
}
jsFiddle Demo
Browser compatibility: Works great with modern browsers.
You can make use of the display table (the advantage of doing it this way is that it will also keep all three columns the same height):
<div style="display:table; width:100%">
<div style="display:table-cell; width: 85px;">Caption to the left</div>
<div style="display:table-cell;">this div has no caption but I want it to take up the remaining space</div>
<div style="display:table-cell; width: 185px;">caption to the right</div>
</div><br />
Or if you want it to be more compatible with older browsers then you can use padding and negative margins:
<div style="padding:0 185px 0 85px">
<div style="float: left; width: 85px; margin-left:-85px;">Caption to the left</div>
<div style="float: left; width: 100%;">this div has no caption but I want it to take up the remaining space</div>
<div style="float: right; width: 185px; margin-right:-185px;">caption to the right</div>
</div>
Example Fiddle
I'm trying to position two panels and just can't get it to work...
I have a container-page wrapping two panels, each with it's own page. I want to position the panels side by side using float.
This is my CSS:
.pages {width: 100%; position: absolute;}
.leftPanel {position: relative; width: 25%; min-width:100px; float: left;}
.rightPanel {position: static;}
and HTML
<div class="page">
<div id="lefty" class="leftPanel">
<div class="page">
<p>helloworld</p>
</div>
</div>
<div id="righty" class="rightPanel">
<div class="page">
<p>HELLO WORLD</p>
</div>
</div>
</div>
I have to use position:relative for the left panel and position:static for the right panel. Strangely this works in JSBin but in my actual page, the right panel with position:static always has 100% width covering the whole screen.
Any hints on what I may be doing wrong?
Thanks!
div elements by default have a width of 100% of their parent. Since you floated the lefty div you took it out of the flow so what is happening is that the lefty div is effectively sitting outside the flow of the elements. Also float causes the div to shrink-wrap to the size of it's children. So if you are wanting to set the righty div to but up against the lefty div then you should do two things: first add float:left; position:relative; to the righty styling. Second you should add a div at the bottom of that to clear your floats.
On another note you should only use a class if you are going to be styling multiple elements the same way, otherwise just style the element off of the ID.
.pages {width: 100%; position: absolute;}
.leftPanel {position: relative; width: 25%; min-width:100px; float: left;}
.rightPanel {position: relative; float: left;}
<div class="page">
<div id="lefty" class="leftPanel">
<div class="page">
<p>helloworld</p>
</div>
</div>
<div id="righty" class="rightPanel">
<div class="page">
<p>HELLO WORLD</p>
</div>
</div>
<div style="clear:left;"></div>
</div>
Try floating both of the panels? As of right now only the left one is floated... try floating both of them to the left and then putting the correct amount of margin between them to line them up like you want them. Or even floating one left and the other right would probably work.
Add this to your CSS,
div.clear-both {clear: both;}
And change your HTML to this:
<div class="page">
<div id="lefty" class="leftPanel">
<div class="page"
<p>helloworld</p>
</div>
</div>
<div id="righty" class="rightPanel">
<div class="page">
<p>HELLO WORLD</p>
</div>
</div>
<div class="clear-both"></div>
</div>
I have markup that looks like this
<div>
<h1 style="text-align:center;" >Heading 1</h1>
<img style="float:left;" src="logo.gif"/>
<h1 style="text-align:center;" >Heading 2</h1>
</div>
<div>
Content goes here
</div>
The problem is that heading 2 is centered relative to the remainder of space after the image, and not to the whole div, so its not centered on the page.
If I remove the img from the flow with position:absolute, it does not push down the content and instead overlaps it.
One way is to add a right padding to the div with the size of the logo:
<div style="padding-right: 50px;">
<img style="float:left;" src="logo.gif"/>
<h1 style="text-align:center;" >Heading</h1>
</div>
<div>
Content goes here
</div>
Another way is to remove the heading from the flow. This only works on the assumption that the logo height is bigger than the heading height. Beware also that image and heading could overlap.
<h1 style="position: absolute; width: 100%; text-align:center;">
Heading
</h1>
<img style="float:left;" src="logo.gif"/>
<div style="clear:both;">
Content goes here
</div>
Solved it through trial and error. I don't know why but in my testing it only works if width is set between 12 and 80%.
So it seems "h1" is a block element, and text-align does not center block elements, it only centers inline elements inside it, which explains the "centered off-center" behavior. So it turns out the answer is the same answer to the question "how do you center a block element?"
<div>
<h1 style="text-align:center;">Heading 1</h1>
<img style="float:left;" src="logo.gif"/>
<h1 style="
text-align:center;
margin-left:auto;
margin-right:auto;
width:50%;
">Heading 2</h1>
</div>
<div style="clear:both;">
Content goes here
</div>
I know i am late for the party, but for future readers I found a different approach for that problem.
use 3 div elements (left div,middle div, right div) inside a flex displayed div container.
make the left and right div the same relative width (in %) and float each one of the to his side.set the middle div width with reminder of 100% - (left div + right div).
locate the image in the left div (or right div if your direction is RTL).
set the text align of the middle div as 'center'.
check this example. also here is a Plunker .
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
<style>
#editorheader {
display:flex;
}
#leftheaderdiv {
float:left;
width:20%;
background-color:gray;
display:inline-block;
}
#middleheaderdiv {
float:left;
width:60%;
background-color:red;
display:inline-block;
text-align: center;
}
#rightheaderdiv {
float:right;
width:20%;
background-color: gray;
}
</style>
</head>
<body>
<div class="subheader" id="editorheader">
<div id="leftheaderdiv"><img src="https://cdn.sstatic.net/Sites/stackoverflow/img/favicon.ico?v=4f32ecc8f43d"/></div>
<div id="middleheaderdiv">I AM IN THE MIDDLE</div>
<div id="rightheaderdiv"></div>
</div>
</body>
</html>
If you are really using logo image then you might try this solution:
<div>
<img style="float:left;" src="logo.jpg"/>
<h1 style="text-align:center; position:relative; left:-100px;" >Heading</h1>
</div>
where -100px replace with half of yours image width.
edit:
idea with absolute position from littlegreen's answer is working. Check it:
<div style="position:relative;">
<img style="float:left; position:absolute;" src="logo.jpg"/>
<h1 style="text-align:center;" >Heading</h1>
</div>
This most simple solution:
<h2 style="text-align:center;text-indent:-*px">Heading 2</h2>
= the logo width
So, i have some block, and this block must contains two divs, first div must be at left(attached to block), second at right(attached to block), and this two divs must coverage all block size.
<div id="block" style="width:800px">
<div id="left" style="float:left;width:50%;"> left </div>
<div id="right" style="float:right;width:50%;"> right</div>
</div>
Both divs have a width half of the parent's div.
But you have to be careful with borders as the width defines the width of the content (i.e. without borders). So if you use borders, the right box will be shown below the left, but still on the right side.
You would do it like this.
<div id="block">
<div id="left"></div>
<div id="right"></div>
</div>
The css would be
#block {
width:800px;
display:block //not sure if this line is required or not
}
#left {
width:400px;
float:left;
}
#right {
width:400px;
float:left;
}
There are many ways this could be done.... here's one:
<div style="position: relative; width: 100%; ">
<div style="position: absolute; left: 0; width: 50%; ">
<p>Content</p>
</div>
<div style="position: absolute; right: 0; width: 50%; ">
<p>Content</p>
</div>
</div>
Would something like this do what you want?
<div id="container">
<div id="leftside" style="width:100px; float:left">
Left Side
</div>
<div id="rightside" style="margin-left: 100px;">
Right Side
</div>
</div>
You may need to tweak the margin-left depending on the padding (and widths obviously). This is an easy way to get the two column approach (even if the two columns is a small box) :)
Or in the interests of separating the HTML and CSS, the same code represented again in two parts :) :
HTML
<div id="container">
<div id="leftside"></div>
<div id="rightside"></div>
</div>
CSS
#container:
{
/* insert any requires styles here :) */
}
#leftside:
{
width: 100px;
float: left;
}
#rightside:
{
margin-left: 100px;
}
Try this:
<div id="container">
<div id="left">
Some Content
</div>
<div id="right">
Some Content
</div>
</div>
CSS:
<style type="text/css">
#container
{
width:500px;
height:500px;
position:relative;
}
#left
{
width:250px;
height:250px;
position:absolute;
float:left;
}
#right
{
width:250px;
height:250px;
position:absolute;
float:right;
}
</style>
Adjust margin and width and you're done.
<div id="main">
<div id="left" style="float:left">
Content Left
</div>
<div id="right" style="float:right">
Content Right
</div>
</div>
Each column has a fixed width of 200px with a 20px margin.
The top-left box and the columns have variable height.
Like this
Tor Valamo kindly provided an answer to a similar question (that being elastic, this is fixed), but I cant centre the layout, as it uses position: absolute.
How can I do it? I know that using a table with colspan and rowspan the answer to this problem is trivial, but I would like to avoid table-based layout like the plague!
Not sure I understand exactly what you're asking, but something like this...?
<div style="float: left;">
<div style="width: 420px;">top</div>
<div style="width: 200px; float: left;">bottom left</div>
<div style="width: 200px; float: left;">bottom right(ish)</div>
<div style="clear: both;"></div>
</div>
<div style="width: 200px; float: left;">big left box</div>
<div style="width: 200px; float: left;">big right box</div>
You can still use the layout that you linked to and have it be centered, despite the position: absolute. I've adapted it for you here (you'll have to tweak to add in the margins, but it works, I tested it:
<html>
<head>
<style>
#outer, #left, #right, #top_left, #bottom_left,
#bottom_left_left, #bottom_left_right, #right_left, #right_right {
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
border:1px solid #000;
}
#outer {margin:0 auto; position:relative;width:800px;}
#left {right:50%;width:400px;}
#top_left {position:relative; width:400px;}
#bottom_left {position:relative;}
#bottom_left_left {right:50%; width:200px;}
#bottom_left_right {left:50%; width:200px;}
#right {left:50%;}
#right_left {right:50%; width:200px;}
#right_right {left:50%; width:200px;}
</style>
</head>
<body>
<div id="outer">
<div id="left">
<div id="top_left">Top left</div>
<div id="bottom_left">
<div id="bottom_left_left">Bottom left</div>
<div id="bottom_left_right">Bottom right</div>
</div>
</div>
<div id="right">
<div id="right_left">Near Right</div>
<div id="right_right">Far Right</div>
</div>
</div>
</body>
</html>