hi I am having a problem centering my content div between my left and right sidebars. My left and ride side bars are floating and there isn't a float:center. The only way I can center it is using padding but that makes my center div go underneath my sidebars.
make a wrapper around all 3 divs and then position the centered div with a margin
<div id="wrap">
<div id="left" style="float: left"></div>
<div id="content" stlye="float: left: margin: 0 auto;"></div>
<div id="right" stlye="float: left"></div>
</div>
Here's a working one.
Use margin: 0 auto; will get your element centered most of the time. (Quick note: your element must have a declared width for this to work.)
The margin: 0 auto; rule is shorthand for 0 top and bottom margin, and automatic left and right margins. Automatic left and right margins work together to push the element into the center of its container.
The margin: 0 auto; setting doesn't work perfectly in every centering situation, but it works in a whole lot of them.
reference: You Can't Float Center with CSS
HTML
<div class="leftsidebar">a</div>
<div class="rightsidebar">b</div>
<div class="content">c</div>
CSS
.leftsidebar
{
height: 608px;
width: 60px;
background:red;
float:left; }
.rightsidebar
{
background:blue;
height: 608px;
width: 163px;
float:right;
}
.content
{
width: auto; //or any width that you want
margin:0 auto;
background:yellow;
}
Floatting basis would be:
<div id="left"> Left</div>
<div id="right" >right</div>
<div id="middle">in between, but after</div>
#left {float:left;width:XX;}
#right {float:right;width:XX;}
#middle {overflow:hidden; margin:0 XX;}
You can as well look for other methods to keep div in the flow [left][middle][right], like using : display: table/table-cell | inline-block | flex.
<div style="widht: 960px;">
<div class="content left">left</div>
<div class="content center">center</div>
<div class="content right">right</div>
<div style="clear:both"></div>
</div>
here the css
.content {
float: left;
}
.left , .right{
width : 180px;
margin : 0 10px;
}
.center{
widht: 540px;
margin : 0 10px;
}
Related
Now I can just put the ABC div to the right but below Body div. How do I put ABC div below Header div? Overlapping is needed.
<div style="width:500px;margin:0 auto;">
<div style="background-color:yellow;height:100px">Header</div>
<div style="background-color:aquamarine; height: 400px">Body</div>
<div style="background-color:red;width:100px;margin-left:auto">ABC</div>
</div>
I have added 2 answers. 1st is for external stylesheet , 2nd is for inline styling (just like how you wrote your code).
Firstly, don't use inline styling. If possible, always use external stylesheet.
Now, for your question, use relative position for the parent and absolute for the child. In this case, parent is your main container and child is that ABC div.
Try this:
#container {
width: 500px;
margin: 0 auto;
position: relative;
}
.header {
background-color:yellow;
height:100px
}
.body {
background-color:aquamarine;
height: 400px;
}
.abc {
background-color:red;
width:100px;
position: absolute;
top: 100px;
right: 0;
}
<div id="container">
<div class="header">Header</div>
<div class="body">Body</div>
<div class="abc">ABC</div>
</div>
Explanation:
Since your .header is 100px, you can set the .abc to top: 100px; and set the right: 0 to move it to the extreme right within the parent since .abc is absolutely positioned to its parent.
If you are only allowed to use inline-styling, then try this:
<div style="width:500px;margin:0 auto;position:relative;">
<div style="background-color:yellow;height:100px">Header</div>
<div style="background-color:aquamarine; height: 400px">Body</div>
<div style="background-color:red;width:100px;position:absolute;top:100px;right:0;">ABC</div>
</div>
I added float: right to place the ABC div on the BODY div (overlap) and interchanged the position of the div BODY and ABC
<div style="width:500px;margin:0 auto;">
<div style="background-color:yellow;height:100px">Header</div>
<div style="background-color:red;width:100px;float: right;">ABC</div>
<div style="background-color:aquamarine; height: 400px">Body</div>
</div>
go to https://www.w3schools.com/css/css_positioning.asp for more information
To make layout you can use flexbox utilities. It's the most common and probably the easiest way to make layout.
I hope this is what you need.
For more infos check DOCS
*,
*::before,
*::after {
box-sizing: border-box;
}
.container-fluid{
width:100%;
}
header{
width:100%;
height:100px;
background:yellow
}
.row{
display:flex;
flex-wrap:wrap;
}
.col-left{
width:100%;
flex:0 0 75%;
max-width:75%;
background:blue;
height:100px
}
.col-right{
width:100%;
flex:0 0 25%;
max-width:25%;
background:red;
}
<div class="container-fluid">
<header></header>
<div class="row">
<div class="col-left"></div>
<div class="col-right"></div>
</div>
</div>
<div id="leftdiv" style="background: yellow; min-width: 400px; max-width: 800px;">left content left content left content</div>
<div id="rightdiv" style="background: red; width: 250px;">right content right content right content</div>
I put the float: left in the left div max-width and min-width not working.
How can i fix this ?
Float right div must be before left coz it gives trouble in some version of ie
<div id="rightdiv" >right content right content right content</div>
<div id="leftdiv">left content left content left content</div>
CSS same as bot
#leftdiv
{
background-color:Yellow;
min-width:100%;
max-width:800px;
float:left;
}
#rightdiv
{
background-color:red;
width:250px;
float:right;
}
Move your right div before the left one:
<div id="rightdiv" >right content right content right content</div>
<div id="leftdiv">left content left content left content</div>
And now just float the right one:
#leftdiv {
background: yellow;
min-width: 400px;
max-width: 800px;
}
#rightdiv {
background: red;
width: 50px;
float: right;
}
Check this FIDDLE DEMO to see is that you want or not.
[!] I've reduce width of right element to see the result in my monitor. You can use the old one.
If you want one of 2 divs to shrink when the viewport is resized, it is wisest to either do as Andi Muqisth said, and use percentages to resize yourd divs, or make one the parent of the other, like so:
Demo: http://jsbin.com/ileyaf/4/edit
<div id="leftdiv">left content left content left content
<div id="rightdiv">right content right content right content</div>
</div>
#leftdiv {
background: yellow;
width: 100%;
}
#rightdiv {
background: red;
max-width: 250px;
float: right;
}
Float left seems working.. see this fiddle
<div id="leftdiv">left content left content left content</div>
<div id="rightdiv" >right content right content right content</div>
CSS
#leftdiv
{
background-color:Yellow;
min-width:100%;
max-width:800px;
float:left;
}
#rightdiv
{
background-color:red;
width:250px;
float:right;
}
if you specify left side div first then simply put
<div style="float:left">
</div>
<div style="clear:both">
</div>
<div style="float:right">
</div>
else if you specify right side div first there is no need of clear both
<div style="float:right">
</div>
<div style="float:left">
</div>
I am trying to set up a border layout with top, left, center, right, bottom. I have seen a few examples and tried them, but none of them seem to work. The main problem is with the left, center, and right columns. I can only get two divs aligned horizontally, the third always falls below the footer. I need this to be resizable. Preferably the center pane will fill the full until the borders.
I have tried float left and float right but it didn't make a difference.
This is what I have tried so far.
http://jsfiddle.net/xQVWs/2/
<body>
<div class="top-wrapper">
<div class="content-wrapper">
<header>
header
</header>
</div>
</div>
<div class="mid-section">
<div class="left-wrapper">
Left Pane
</div>
<div class="main-content">
Main pane
</div>
<div class="right-wrapper">
right pane
</div>
</div>
<div class="bottom-wrapper">
<div class="content-wrapper">
footer
</div>
</div>
</body>
You could use float:left on the first two middle columns and a float:right on the third. I would put an overflow:hidden on the wrapper for the middle columns.
http://jsfiddle.net/zer6N/1/
.mid-section
{
background-color: blue;
width: 100%;
height:1000px;
overflow:hidden;
}
.left-wrapper, .right-wrapper {
background: #ffff00;
height: 100%;
min-height: 100%;
width: 21%;
display:block;
float:left;
margin:0;
}
.right-wrapper {
background:#efefef;
float:right;
}
.main-content {
background-color: black;
width: 58%;
height: 100%;
margin:0;
float:left;
}
How can i set the width of the first 2 divs to be dynamic (fit the contents width), while the 3rd div should use remaining horizontal space and be horizontally scrollable.
The result i need is that all 3 divs sit side by side and the 3rd div is hoziontally scrollable.
Script i have is as follows
HTML
<div id="a">
<table>
<tr><td>text</td></tr>
</table>
</div>
<div id="b">
<table>
<tr><td>text</td></tr>
</table>
</div>
<div id="c">
<table>
<tr><td>text</td></tr>
</table>
</div>
CSS
div#a
{
float: left;
}
div#b
{
float: left;
}
div#c
{
float: left;
width: 100%;
overflow-x: scroll;
}
The above script pushes div3 to the next line, which i dont want.
If you float #a and #b to the left, #c will fill the rest of the parent's width.
To get #c horizontally scrollable, you style its content container as:
#c .scroll-content {
/* You shouldn't do this on a table, but rather on a wrapping container. */
display: inline-block;
white-space: nowrap;
overflow: auto;
overflow-y: hidden;
}
I made an example at JSFiddle.
You should set a parent div to hold them all together in the same row. Something like this instead should work.
<div id="parent">
<div id="a">
<table>
<tr><td>text</td></tr>
</table>
</div>
<div id="b">
<table>
<tr><td>text</td></tr>
</table>
</div>
<div id="c">
<table>
<tr><td>text</td></tr>
</table>
</div>
</div>
div#a
{
float: left;
}
div#b
{
float: left;
}
div#c
{
float: left;
}
#parent{
width: 100%;
overflow-x: scroll;
}
Also you might want to refactor your code. Since all of the divs are floating left, you might want to use just one class that floats to the left. I hope this helps.
The CSS...
#a {
float:left;
border:solid 1px #000;
width:33%;
}
#b {
float:left;
border:solid 1px #000;
width:33%;
}
#c {
float:left;
border:solid 1px #000;
width:33%;
}
.scroll{
float:left;
overflow:auto;
width:100%;
}
.content {
width:1000px;
overflow:auto;
}
And the HTML...
<div id="a">
This is text within my first content box
</div>
<div id="b">
This is text within my second content box
</div>
<div id="c">
<div class="scroll-content">
This is text within my third content box and this is horizontal and scrollable
</div>
</div>
UPDATED JSFIDDLE LINK BELOW AGAIN!!!
And a demo on jsfiddle - http://jsfiddle.net/GeLqV/1/
Mark, this will work for you now. I now see that you wanted all three divs on the same row, and the last one being able to horizontally scroll. Look at my jsfiddle demo. No matter what your screen size will be, all three div's are fluid in size and will stay together (for the most part).
I need the center div div#b to fill out the gab between div#a and div#c.
<div id="a">
<span>Div1</span>
</div>
<div id="b">
<span>Div2</span>
</div>
<div id="c">
<span>Div3</span>
</div>
I tried to do this by placing width: 100% on div#b but without luck.
div
{
border:1px solid red;
}
div#a
{
float:left;
width:50px;
}
div#b
{
float:left;
width:100%; ?? <!-- Doesn't work!!! -->
}
div#c
{
float:right;
width:50px;
}
How can I get div#b to expand from div#a to div#c?
There can be no line breaks.
CSS3
You can implement this dynamic behavior using the CSS3 Flexible Box Layout Module:
<style type="text/css">
div.Container
{
width: 100%;
display: box;
display: -moz-box;
display: -ms-box;
display: -webkit-box;
}
div.B
{
background: magenta;
box-flex: 1;
-moz-box-flex: 1;
-ms-box-flex: 1;
-webkit-box-flex: 1;
}
</style>
<div class="Container">
<div style="width: 50px; background: cyan;">
A
</div>
<div class="B">
B
</div>
<div style="width: 50px; background: yellow;">
C
</div>
</div>
A new version of FireFox, a new version of Google Chrome, Internet Explorer 10 and a new version of Safari supports CSS3 flexible box layout. Internet Explorer 9 and Opera is lacking support at the moment.
I also want to mention this new way to do it in FireFox:
<div style="float: left; width: 50px; background: cyan;">
A
</div>
<div style="float: left; width: -moz-calc(100% - 100px); background: magenta;">
B
</div>
<div style="float: left; width: 50px; background: yellow;">
C
</div>
FireFox is the only browser that support the calc function at the moment.
CSS2
Here is the old way to do it:
<div style="padding-left: 100px;">
<div style="float: left; width: 50px; margin-left: -100px; background: cyan;">
A
</div>
<div style="float: left; width: 100%; margin-left: -50px; background: magenta;">
B
</div>
<div style="float: left; width: 50px; background: yellow;">
C
</div>
</div>
A width of 100% inside the container div is the width of the container minus the 100px left padding. Then there is room for the left and right 50px div elements. Then you have to position them using some negative margin and floating.
Feature detection
Use feature detection with Modernizr. Then you can use CSS2 for browsers that lack support for CSS3 flexbox.
If you do .NET development you can download Modernizr with NuGet.
I've hit similar problems myself. The problem here is "width: 100%" will basically inherit the width of the parent container.
The other problem is the float. When you ask div#b to float to the left alongside div#a, you can't use the fancy margin trick to force div#b to stay out of the way of div#a. (In other words, margin can be used to keep div#b from entering and interfering with a certain amount of space on any of its sides.) However, with float, the margin is now not pushing div#b away from the edge of the page, but away from the edge of div#a.
OK, so the solution looks like this. Remove the float on div#b, and then apply left and right margins so div#b doesn't interfere with either side columns. Let div#b determine its own size (i.e. don't give it a "width"), so it will fit between the two floats. Lastly, shift div#b so that the floats occur before div#b is put in place, so that div#b is put between the floats.
Here's the new code:
<style type="text/css">
div
{
border:1px solid red;
}
div#a
{
float:left;
width:50px;
}
div#b
{
margin-left: 55px;
margin-right: 55px;
}
div#c
{
float:right;
width:50px;
}
</style>
<div id="a">
<span>Div1</span>
</div>
<div id="c">
<span>Div3</span>
</div>
<div id="b">
<span>Div2</span>
</div>
Determining margins is tricky. Borders aren't counted in the width calculation of an element, so a 50px-wide div with a 1px border is actually 52px-wide.
I have a feeling you won't like this answer, but the easiest way to do it is to remove float: left and any width from div#b, and then switch up the order of your divs, so both the sidebars are before your main content area. Here's the code:
HTML:
<div id="a">
<span>Div1</span>
</div>
<div id="c">
<span>Div3</span>
</div>
<div id="b">
<span>Div2</span>
</div>
CSS:
div
{
border:1px solid red;
}
div#a
{
float:left;
width:50px;
}
div#b
{
overflow: hidden;
/*margin: 0 60px;*/
}
div#c
{
float:right;
width:50px;
}
Note that I've applied overflow: hidden to the middle div - this will force it into columns (in most browsers). You could use the given margins instead, if you're not comfortable with a "magic" solution (there is a reasonable explanation for it, but I can never remember it off the top of my head).