So, i have a fixed width div that should go on middle of the page, but before it& after it, i should have auto width divs that span from edge to edge of the page, like this:
<div class="left">Content goes from left edge of screen to center div</div>
<div class="center">Fixed width div that is always centered</div>
<div class="right">Content goes from center div to right edge of screen</div>
https://jsfiddle.net/hww17nzL/2/
Any suggestions how this can be done?
Use Flexbox on a container element.
.container {
display: flex;
justify-content: space-between;
}
.center {
flex: 0 0 300px;
}
<div class="container">
<div>Content goes from left edge of screen to center div</div>
<div class="center">Fixed width div that is always centered</div>
<div>Content goes from center div to right edge of screen</div>
</div>
there are a number of ways to do this. you can use display:table-cell
without any more specific requirements from you...i cannot say which would be best for you to use
let me know if this works for you
see snippet or > jsfiddle
.center {
width:300px;
text-align:center;
}
.left {
}
.right {
}
div {
display:table-cell;
}
<div class="left">Content goes from left edge of screen to center div</div>
<div class="center">Fixed width div that is always centered</div>
<div class="right">Content goes from center div to right edge of screen</div>
Related
I am using the awesome Select2 jQuery plugin.
Currently I have a fixed-width div floating to the left of a fluid-width div, this works well:
<div class="row">
<div class="col left">Label</div>
<div class="col right"></div>
</div>
.row {
display: table;
}
.col {
display: table-cell;
}
.col.left {
width: 150px
}
But it doesn't work so well when I add a select2 box inside the fluid right div. Now it becomes clear that the fluid right div is not actually 100% width, it adapts to the width of its content, and as a result the select2box also changes size constantly:
<div class="row">
<div class="col left">Label</div>
<div class="col right"><select style="width: 100%" class="select2">
Here is a JSFiddle demonstrating the problem: http://jsfiddle.net/vfa4831b/4/
How can I make the .right fluid-width div adapt to the width available, and stay at that size?
Adding width: 100%; to .col.right makes the div 100% width, but also overflows the boundaries of .row.
UPDATE: I need IE8 support, unfortunately, so can't just use calc.
Try this:
.row {
display: table;
width: 100%;
background: #ccc;
}
Your row that uses display: table wasn't actually being set to be 100%.
I know this isn't exactly a new topic but all my researches were without a result.
What I try to accomplish:
Two divs inside one div, next to each other. (easy: float, inline-block)
If the browser window is to small the divs should stay next to each other.
What happens right now:
If the browser window is not wide enough, the second div slips under the first one.
Example: http://pastebin.com/e9cuWjwT
How can I solve that?
If you add width to the container surrounding your divs, they will stay next to each other even if the screen real estate gets smaller. Because you've told the browser how big you want container to be, resizing the screen won't affect their placement.
Here's is a fiddle with very simplified code to show a scenario that works:
http://jsfiddle.net/Lera/CmJhw/1/
CSS:
.wrapper {
width:1024px;
}
div {
display: inline-block;
}
HTML:
<div class="wrapper">
<div>First Div</div>
<div>Second Div</div>
</div>
You could try something like:
HTML:
<div>
<div class="selection">Menu 1</div>
<div class="selection">Menu 2</div>
<div class="selection">Menu 3</div>
<div>
CSS:
div {
border: 1px solid #CCC;
display: table;
width: 100%; /* set to what you need */
}
div > div {
display: table-cell;
vertical-align: top;
}
The table cells will always stay in a single row and their widths will adjust as the width of the parent block (with display: table) adjusts to the width of the browser.
I have a simple problem with divs. How can I float 3 DIVs inside one DIV that's not floated?
Here is my code:
<div style="margin:0 auto;width:1240px;border:1px solid #000000;">
<div style="width:200px;height:50px;float:left;border:1px solid #000000;">
test
</div>
<div style="width:200px;height:50px;float:left;border:1px solid #000000;">
test
</div>
<div style="width:200px;height:50px;float:left;border:1px solid #000000;">
test
</div>
</div>
I want to float child DIVs inside this parent DIV or a way to center them without floating...display:inline-block won't work for the child divs as they are of different heights and one div is an image...so i think the best way is to float them and optimize the margins...In this case i want the parent div to be centered across the screen so i use margin:0 auto instead of float but this leads to the child div not stretching the parent div and it appears as a thin line.
You can test the fiddle I created to understand the problem:
http://jsfiddle.net/tQpM5/
Thanks
If I understand correctly, you want to center 3 boxes on the same row:
.wrapper{
margin:0 auto;
text-align:center;
vertical-align: top;
}
.box{
width:200px;
height:50px;
display:inline-block;
text-align:left;
}
HTML:
<div class="wrapper">
<div class="box"> 1 </div>
<div class="box"> 2 </div>
<div class="box"> 3 </div>
</div>
demo
Since all the child divs widths are less than that of the parents, they should naturally line up side by side. Try give each child div a position: relative; margin: auto. This way they should center themselves with in the parent
The parent div appears as a line because its contents is floating, settings its height to 1px. To resolve this you need to clear the floats after this element. Often referred to as clearfix.
.clearfix:after {
clear: both;
content: "";
display: table;
}
Then you can just float the children as normal. I used margin: auto on the parent to make it centered.
See this demo:
http://jsfiddle.net/c2NjZ/
Note for old browser support on clearfixing see:
http://css-tricks.com/snippets/css/clear-fix/
The container div's float and it's child div's float values (or no float) are independent of each other, you just need to clear the child div's before you close the parent div:
<style type="text/css">
.clearfloat {clear:both;height:0;font-size:1px;line-height:0px;}
</style>
<div class="parent">
<div class="child" style="float:left;">
Hi
</div>
<div class="child" style="float:right;">
There
</div>
<br class="clearfloat">
</div>
Update to your example: http://jsfiddle.net/tQpM5/2/
What you need is to give the parent div: overflow:hidden; so it can contain its child div.
Child divs will float beside each other, however when you re-size your browser, they will float under each other, to avoid this, you can give the parent div a min-width.
To center the parent div, you can give it a margin-left:auto; margin-right:auto;, however you must specify a width so that it does not stretch and take all its available width.
Since you chose to use floats and not inline-block, then the only thing left is to deal with margins just like you said.
DEMO
Have Three columns..Combine width of all three is fixed.. 2nd ( center ) column will have dynamic content.. I need left and right column to fill out remaining space ( container width - center column dynamic width )equally.
Example:
http://jsfiddle.net/htKje/
<div class="container">
<div class="bg"></div>
<div>Lorem Ipsum</div>
<div class="bg"></div>
</div>
CSS :
.container { width:500px; }
.bg {backgrould:#CCC; }
If you need the left and right columns just for setting the background, then most probably, you don't even need them at all.
Simply setting the background on the .container, giving the same container text-align: center, making the center column inline-block and reseting the background and text-align on it will do the trick.
demo
HTML:
<div class='container'>
<div class='c'>booooo add remove text here</div>
</div>
CSS:
.container {
background: #ccc;
text-align: center;
}
.c {
display: inline-block;
background: white;
text-align: left;
}
I have a absolutely position div that is overlapping a containers background due to it having a larger height. This div is sharing the container with a body div that's sitting happily to the left of it.
Is there a way to extend the container to be the height of the absolutely positioned div, rather than the body content?
Or should I just float the divs side by side and chuck a <div style="clear: both"></div> at the bottom of the two? Seems like a messy hack to get a container to extend :/
EDIT: Comments don't seem to like code structure. So I'll edit it into here as well.
The layout is:
<div id="content">
<div class="container">
<div id="header"></div>
<div id="main">
<div id="column-1"></div>
<div id="column-2"></div>
</div>
</div>
</div>
#content has a repeated background and #container sets the fixed width of the page. #header sits up to for the links and #main holds the two columns which have the main content for the page. I can't get those two columns to sit next to each other (float / absolutely) whilst having the #content's background repeat down below them
With this layout:
<div id="content">
<div class="container">
<div id="header"></div>
<div id="main">
<div id="column-1"></div>
<div id="column-2"></div>
</div>
</div>
</div>
your basic CSS should be something like:
html, body, div { margin: 0; padding: 0; border: 0 none; }
body, #content { height: 100%; }
#main { overflow: hidden; }
#column-1 { float: left; width: 300px; }
#column-2 { float: left; width: 600px; }
You said you wanted the background image appearing below the content. From this I assume you mean you want the page to be full screen height (minimum).
The point of absolute positioning is that it removes the element from the normal flow so no you can't have it's "container" extend to include it because technically it has no container.
Absolute positioning has its place but 9 times out of 10 I get better results with a float-based layout. But I can't really say more without more information.