I have two divs with float:left inside a container with a fixed width - something like that
<div style="width:1100px">
<div id="A" style="float:left; width: 400px"></div>
<div id="B" style="float:left; min-width: 600px"></div>
</div>
Here is the problem. Both internal divs A and B are generated dynamically and div B can exceed 700px. In that case, it goes below div A. I cannot easily change the width of the container, because it is also generated automatically by bootstrap.
I've tried to play with the overflow options, but it didn't work. I could recalculate the width of the container dynamically with jquery based on the total width of divs A and B, but it will be overdo.
What is the easiest way to force div B stay next to div A regardless of its width?
Thanks
like my comment and using akinuri modified fiddle, using percentage and without scroll bar;
#container {
width: 1100px;
position: relative;
overflow: show; /* or hidden if you dont want the scrool bar */
}
#A {
background: yellow;
width: 60%;
}
#B {
position: absolute;
top: 0;
left: 60%; /* width of #A */
width: 80%;
background: blue;
}
you get
http://jsfiddle.net/TRFmL/1/
EDIT
I think now I have whatyou want:
#container {
width: 100%;
position: relative;
overflow: show; /* or hidden if you dont want the scrool bar */
}
#A {
float:left;
display:inline-block;
background: yellow;
width: 60%;
}
#B {
float: right;
margin-right: -40%; // this is the result of 100 - (A+B)
display:inline-block;
width: 80%;
background: blue;
}
One way I can think of is using absolute positioning.
<div id="container">
<div id="A">a</div>
<div id="B">b</div>
</div>
#container {
width: 1100px;
position: relative;
overflow: auto; /* or hidden if you dont want the scrool bar */
}
#A {
background: yellow;
width: 400px;
}
#B {
position: absolute;
top: 0;
left: 400px; /* width of #A */
width: 900px;
background: blue;
}
FIDDLE
You can use inline-block display for the div, then set white-space to nowrap and remove any white space between the two div.
Live example: http://jsfiddle.net/VMVAb/
Related
I have 2 columns 50% width each. Inside each column I have overflown content positioned absolutely relative to body.
<div class='column left'>
<div class='inner'><h1>Pink</h1></div>
</div>
<div class='column right '>
<div class='inner'><h1>Blue</h1></div>
</div>
I need the inner divs to be hidden. How do I do that? Setting overflow:hidden on .column has no effect on inner divs. Fiddle HERE
PS. The idea is to animate the width of the columns and show the inner content. This fiddle illustrates what i am trying to achieve (but it is using vh, vw that I cannot use due to browser requirement)
html, body {
width :100%;
height: 100%;
position: relative;
}
.column {
float: left;
width: 50%;
height: 100%;
overflow: hidden; /*has no effect*/
}
.inner {
position: absolute;
top: 50%;
width: 100px;
}
.left .inner {
right: 20px;
text-align: right;
}
.right .inner {
left: 20px;
text-align: left;
}
Are you simply looking for
visibility: hidden;
or
display: none;
This last one removes the element from the DOM.
There are 3 divs, side by side to each other.
so div1 div2 div3
Is there a way to focus the scroll only on div2? so that the contents of div1 and div3 is always seen while the user 'scrolls' only on div2?
Preferably a css solution if possible. If not, what solutions are possible?
#div1, #div3
{
overflow: hidden;
}
#div2
{
overflow:scroll;
}
If you want to hide horizontal scroll use: overflow-x:hidden and for vertical use overflow-y:hidden
Add the following css:
body, #div1, #div3
{
overflow:hidden;
}
#div2
{
overflow-y:scroll;
}
Note that you need to set a width and height to the elements, and anything that goes outside of the width and height of div1,div3 and the body won't be shown, while in div2 it will be scrollable.
You could fix the position of the first and last div, so only the center div will scroll;
HTML
<div class="l">left</div>
<div class="m">middle</div>
<div class="r">right</div>
CSS:
html, body {
height: 100%;
margin: 0;
padding: 0;
}
.l, .r {
width: 33%;
height: 100%;
position: fixed;
background: lightgreen;
top: 0;
}
.l { left: 0; }
.r { right: 0; }
.m {
margin: 0 33%;
min-height: 100%;
background: lightblue;
}
Also check this JSFiddle.
You could use the position: fixed in css. My solution makes the body scrollable. If one would refresh the page, it would hop back to where they were, not sure if the overflow-method does that. Also, this allows you to user anchors to parts of you content ()
This is a quick draft:
<div id="divWrap">
<div id="div1">1</div>
<div id="div2">2</div>
<div id="div3">3</div>
</div>
.
/* This wrapper places content centered in the page, the relative is important */
#divWrap{
position: relative;
margin: 0 auto;
width: 500px;
}
/* Place this one fixed, top, left */
#div1{
position: fixed;
left: 0;
top: 0;
width: 100px;
}
/* This div acts normal */
#div2{
margin: 0 100px 0 200px; /* margins => the widths of 1 & 2 */
width: 200px;
}
/* Place this one fixed, top, right */
#div3{
position: fixed;
right: 0;
top: 0;
width: 200px;
}
hmm do you mean so div1 and div3 are fixed on the page, meaning that when you scroll only div2 is scrolled? if so, something like
HTML
<div class="container">
<div class="div-one"></div>
<div class="div-two"></div>
<div class="div-thee"></div>
</div>
CSS
.container { position: relative; }
.div-one, .div-two { position: fixed; }
This won't work right off the bat but you get the idea.
I'm trying to achieve a past and future picture line in 2 divs. All pictures on left side of screen stack to infinity from right to left and all images on the right side of screen stack to infinity left to right. I have almost achieved this except I can't stop the images going to a new line.
Fiddle
HTML
<div id="parent1">
<div id="past">
<img id="topic1" src="./img/topic1.png"></img>
<img id="topic2" src="./img/topic2.png"></img>
...
</div>
<div id="future">
<img id="topic1a" src="./img/topic1a.png"></img>
<img id="topic2b" src="./img/topic2b.png"></img>
...
</div>
</div>
CSS
#parent {
position: absolute;
height: 100%;
width: 100%;
top: 0%;
left: 0%
}
#future {
position: absolute;
height: 100%;
width:50%;
left:50%;
top:0%
}
#future img {
float: left;
height: auto;
width: auto;
margin: 1%;
max-height: 100%;
white-space: nowrap;
}
#past {
position: absolute;
height: 100%;
width:50%;
left:0%;
top:0%
}
#past img {
float: right;
height: auto;
width: auto;
margin: 1%;
max-height: 100%;
white-space: nowrap;
}
Any help would be great. Currently they're stacking vertically to infinity :(
Based on your description in the comments, you would like the following structure:
3 - 2 - [ 1 | 1 ] - 2 - 3
Where the elements numbered 1 are visible and 2 & 3 are off the screen but still inline.
You could achieve this by having the elements in the div on the right - #present - using text direction left to right (default in western browsers, but worth specifying if your layout depends on it) and the div on the left - #future - using the text direction right to left. You can then hide the overflowing elements using overflow: hidden within the parent element:
CSS
img {
height: 100%;
width: 100%;
}
#past, #future {
position: absolute;
height: 100%;
width:50%;
left:0%;
top:0%;
overflow: hidden;
white-space: nowrap;
}
#past {
left:50%;
text-align: left;
direction: ltr;
}
#future {
text-align: right;
direction: rtl;
}
HTML
<div id="past">
<img id="topic1" src="/path/to/image1.jpg"></img>
<img id="topic2" src="/path/to/image2.jpg"></img>
<img id="topic3" src="/path/to/image3.jpg"></img>
</div>
<div id="future">
<img id="topic1a" src="/path/to/image4.jpg"></img>
<img id="topic2b" src="/path/to/image5.jpg"></img>
</div>
Working example: http://jsfiddle.net/vymvN/
Right. The current answer I've got is to float: right, and make the #past div dynamically change width based on how many images are in it. If there is a of a non JavaScript way I'd be chuffed to learn about it :D
CSS
#past {
right: 50%;
width: 300%;
}
#past img {
float: right;
}
JQuery
$('#past').css('width', ( $('#past > img').size() ) * 100 + "%");
I have a single column layout where the column is a centered div with a fixed width. I want to place a wider div within the column which overflows it's parents, but center it within the parent. Conceptually something like the following:
<div style="width: 100px; margin: 0 auto; overflow:visible;" id="parent">
<div style="width: 400px; margin 0 auto;" id="child"></div>
</div>
The centering works as long as the child div is thinner than its parent, but once it gets larger, it always aligns left with the parent for some reason.
#wrapper {
margin: 0 auto;
width: 200px;
background-color: #eee;
position: relative;
height: 200px;
}
#child {
position: absolute;
top: 0;
left: 50%;
margin: 0 0 0 -200px;
width: 400px;
background-color: #ddd;
}
<div id="wrapper">
<div id="child">Child div</div>
</div>
jsFiddle
When an element overflows his parent, it is normal behaviour that it only overflows to the right. When you, for example, have a site that is wider then the viewport, you never have to scroll left, but only to the right. This solution is based on a absolute centered div, with a negative left margin (that value is the half of his own width). So if you know the width of this element, this solution should be fine.
Tested in FF 3.6, IE7 and IE8
I made a variation of Justus' solution. Instead of relative positioning, I used a negative margin of 50% in the inner element.
#wrapper {
margin: 0 auto;
padding: 10px 0 10px;
width: 200px;
background-color: #eee;
}
#child {
margin: 0 -50%;
width: 400px;
background-color: #ddd;
}
This way you don't need to know the element sizes ahead of time.
I am not 100% sure but try giving the parent element a position set to relative and child absolute and then set top, left and width/height properties for the child div accordingly.
This is how I solve it:
http://jsfiddle.net/WPuhU/1/
Also take care of the scrollbars(they do not appear if your window view is smaller then the overflowing div). Auto centers the overflowing div.
css:
#center-3 {height:40px;background-color: #999;}
#center-1 {height:20px;top:10px;background-color: #aaa;}
/* the necesary code */
body {width:100%;margin:0;}
#center-4 {
width: 100%;
overflow:hidden;
/* remove the next 2 line for a normal flow */
position: absolute;
z-index: -1;
}
#center-3 {
position: relative;
margin: 0 auto;
width: 200px;
}
#center-2, #center-1 {
position: relative;
width: 400px;
}
#center-2 {
left: 50%;
}
#center-1 {
left: -50%;
}
html:
<div id="center-4">
<div id="center-3">
<div id="center-2">
<div id="center-1"></div>
</div>
</div>
</div>
<div id="other-stuff">Here comes the other stuff above.</div>
#parent {
position: relative;
width: 100px;
overflow: visible;
}
#child {
width: 400px;
position: absolute;
left: 50%;
transform: translateX(-50%);
}
This question already has answers here:
Align <div> elements side by side
(4 answers)
Closed 4 years ago.
I have a small problem. I am trying to align two divs side by side using CSS, however, I would like the center div to be positioned horizontally central in the page, I achieved this by using:
#page-wrap { margin 0 auto; }
That's worked fine. The second div I would like positioned to the left side of the central page wrap but I can't manage to do this using floats although I'm sure it is possible.
I would like to push the red div up alongside the white div.
Here is my current CSS concerning these two divs, sidebar being the red div and page-wrap being the white div:
#sidebar {
width: 200px;
height: 400px;
background: red;
float: left;
}
#page-wrap {
margin: 0 auto;
width: 600px;
background: #ffffff;
height: 400px;
}
If you wrapped your divs, like this:
<div id="main">
<div id="sidebar"></div>
<div id="page-wrap"></div>
</div>
You could use this styling:
#main {
width: 800px;
margin: 0 auto;
}
#sidebar {
width: 200px;
height: 400px;
background: red;
float: left;
}
#page-wrap {
width: 600px;
background: #ffffff;
height: 400px;
margin-left: 200px;
}
This is a slightly different look though, so I'm not sure it's what you're after. This would center all 800px as a unit, not the 600px centered with the 200px on the left side. The basic approach is your sidebar floats left, but inside the main div, and the #page-wrap has the width of your sidebar as it's left margin to move that far over.
Update based on comments: For this off-centered look, you can do this:
<div id="page-wrap">
<div id="sidebar"></div>
</div>
With this styling:
#sidebar {
position: absolute;
left: -200px;
width: 200px;
height: 400px;
background: red;
}
#page-wrap {
position: relative;
width: 600px;
background: #ffffff;
height: 400px;
margin: 0 auto;
}
I don't understand why Nick is using margin-left: 200px; instead off floating the other div to the left or right, I've just tweaked his markup, you can use float for both elements instead of using margin-left.
Demo
#main {
margin: auto;
width: 400px;
}
#sidebar {
width: 100px;
min-height: 400px;
background: red;
float: left;
}
#page-wrap {
width: 300px;
background: #0f0;
min-height: 400px;
float: left;
}
.clear:after {
clear: both;
display: table;
content: "";
}
Also, I've used .clear:after which am calling on the parent element, just to self clear the parent.
This Can be Done by Style Property.
<!DOCTYPE html>
<html>
<head>
<style>
#main {
display: flex;
}
#main div {
flex-grow: 0;
flex-shrink: 0;
flex-basis: 40px;
}
</style>
</head>
<body>
<div id="main">
<div style="background-color:coral;">Red DIV</div>
<div style="background-color:lightblue;" id="myBlueDiv">Blue DIV</div>
</div>
</body>
</html>
Its Result will be :
Enjoy...
Please Note: This works in Higher version of CSS (>3.0).
The HTML code is for three div align side by side and can be used for two also by some changes
<div id="wrapper">
<div id="first">first</div>
<div id="second">second</div>
<div id="third">third</div>
</div>
The CSS will be
#wrapper {
display:table;
width:100%;
}
#row {
display:table-row;
}
#first {
display:table-cell;
background-color:red;
width:33%;
}
#second {
display:table-cell;
background-color:blue;
width:33%;
}
#third {
display:table-cell;
background-color:#bada55;
width:34%;
}
This code will workup towards responsive layout as it will resize the
<div>
according to device width.
Even one can silent anyone
<div>
as
<!--<div id="third">third</div> -->
and can use rest two for two
<div>
side by side.
It's also possible to to do this without the wrapper - div#main. You can center the #page-wrap using the margin: 0 auto; method and then use the left:-n; method to position the #sidebar and adding the width of #page-wrap.
body { background: black; }
#sidebar {
position: absolute;
left: 50%;
width: 200px;
height: 400px;
background: red;
margin-left: -230px;
}
#page-wrap {
width: 60px;
background: #fff;
height: 400px;
margin: 0 auto;
}
However, the sidebar would disappear beyond the browser viewport if the window was smaller than the content.
Nick's second answer is best though, because it's also more maintainable as you don't have to adjust #sidebar if you want to resize #page-wrap.
The easiest method would be to wrap them both in a container div and apply margin: 0 auto; to the container. This will center both the #page-wrap and the #sidebar divs on the page. However, if you want that off-center look, you could then shift the container 200px to the left, to account for the width of the #sidebar div.