There is parent-block:
#content
{
position: relative;
width: 92%;
margin: 0 auto;
height: 100%;
min-height: 500px;
border: 1px solid red;
}
And I need 2 blocks in it:
#news
{
position: relative;
float: left;
min-height: 400px;
width: 290px;
height: 100%;
}
#text
{
position: relative;
float: left;
margin-left: 20px;
min-height: 400px;
width: 625px;
height: 100%;
}
<div id="content">
<div id="news">
...
</div>
<div id="text">
...
</div>
</div>
But 2nd text block isn't in one line with news. And, after resizing news and text block, content block should resize too, but it doesn't... Why?
It's because both the divs inside #content are floated, taking them out of the normal document flow. On #content, change height: 100%; to overflow: hidden; - this should make it accomodate the floated elements inside it.
You may need to add:
display:inline;
to the divs.
Also, double check that there is enough space in the parent div. Each browser calculates this differently. That is, for the two divs to appear side by side there must be enough space to account for their widths and margins etc.
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.
So I want to float three divs side by side. Right now I have them with display: inline-block; and floating left, but when the window gets too small, the rightmost <div> is forced to be below the other two.
Also I need it so that the rightmost and leftmost <div> have a certain maximum width, and the center <div> should change it's width to fill the window. (I'm giving you this information in case any solutions interfere with this). How do I achieve what I want?
Edit
The container for this <div> (whether it be the body, or another <div>), has to be of width 100%. I need three side by side <div>s positioned like this:
This should keep it's form as I make the window smaller or larger. This is the HTML/CSS I have now:
<div class="app-view">
<div class="search-form"/>
<div class="results-view"/>
<div class="quick-viz"/>
</div>
.app-view-wrapper {
display: inline-block;
height: 100%;
}
.search-form {
border-right: solid 1px #d1d2d4;
display: inline-block;
float: left;
height: 100%;
max-width: 300px;
min-height: 900px;
position: relative;
width: 30%;
background: #78787b;
}
.results-view {
display: inline-block;
height: 100%;
padding-left: 10px;
float: left;
min-height: 900px;
min-width: 200px;
overflow-y: scroll;
width: 55%;
}
.quick-viz {
display: inline-block !important;
position: relative;
float: left;
height: 100%;
background: #78787b;
overflow-x: scroll;
margin-left: 10px;
}
Updated answer, exactly follows this structure (as requested):
Use a container:
<div class="container">
<div class="a"></div>
<div class="b"></div>
<div class="c"></div>
</div>
CSS
.a, .b, .c {
float: left;
height: 200px;
width: 21%;
margin: 2%
}
.b {
width: 46%;
}
.container {
width: 100%;
overflow: hidden;
}
DEMO: http://jsfiddle.net/dQQhz/4/
I have a div inside a div, the child both being centered in its parent and bigger than the parent making it overflow equally on both sides of it. The child has another div inside it with some text.
<div class="outer">
<div class="inner">
<div class="text">
testing testing
</div>
</div>
</div>
css:
.outer
{
width: 400px;
height: 400px;
background: beige;
margin: 0 auto;
}
.inner
{
width: 600px;
height: 200px;
background: pink;
position: absolute;
left:0;right:0;
margin: auto;
}
.text
{
margin-left: auto;
margin-right: auto;
width: 400px;
}
http://jsfiddle.net/msVVD/4/
Now, if the document width is narrowed by resizing the browser window, or in the jsfiddle case, resized by dragging the handle between "JavaScript" and "Result", the text will not stay on the same horizontal position, but "travel" to the right.
Why?
You need to set a min-width to the body (or parent container in which the absolutely positioned element is aligned according to) like so
body
{
min-width: 600px;
}
This will prevent the absolutely positioned from traveling
FIDDLE
You are not positioning the .inner element relatively to the .outer one. Add position: relative to .outer.
Changes in your CSS:
.outer
{
width: 400px;
height: 400px;
background: beige;
margin: 0 auto;
position: relative;
}
.inner
{
width: 600px;
height: 200px;
background: pink;
position: absolute;
left:0;right:0;
margin: auto;
margin-left: -100px;
padding-left: 100px;
}
Fiddle: http://jsfiddle.net/msVVD/7/
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.
Ok so I have a website and the entire thing is wrapped in a container. This container is centered with margin:auto. I would like to float a piece of content to the right of this centered container and have it sort of stick to the side of it no matter if the user resizes the browser window, etc. I'm wondering if there's a real simple way to do this rather than adding another huge div, giving it width and floating the centered portion to the left and the piece of content to the right. Thanks!
Piggybacking on #NickAllen, you want to use absolute positioning so that the width of the sidebar isn't included in the centering on the primary container.
#container {
position: relative;
width: 500px;
border: 1px solid #f00;
margin: 0px auto;
}
#sidebar {
position: absolute;
width: 200px;
right: -200px;
border: 1px solid #0f0;
}
<div id="container">
<div id="sidebar">
[ sidebar content ]<br>
[ sidebar content ]<br>
</div>
[content]<br>
[content]<br>
[content]<br>
</div>
Maybe I'm misunderstanding your question, but isn't this what you want:
#container {
width: 960px;
margin: 0px auto;
}
#sidebar {
float: right;
}
<div id="container">
<div id="sidebar">
some content
</div>
</div>
Give the container div the property position: relative; place your floating div as the first child of the container div and give it
#floatingDiv
{
position: absolute;
top: 0;
right: -{widthOfFloatedDiv};
}
I think that will work, but untested
Okay so tested it and it works
<div style="position: relative; width: 980px; margin: 0 auto; border: 1px solid #000; height: 400px;">
<div style="position: absolute; top: 0; right: -200px; width: 200px;">
<p>Floated DIV</p>
</div>
<p>container div</p>
</div>
Old question, but contributing since other answers were kinda lacking that "something" and it's still on top of Google. The simplest, cleanest way to achieve this is with two wrappers.
<div class="bigWrapper">
<div class="sidebar">Hello, I'm your sidebar</div>
<div class="smallWrapper">
Put the thing you want to center here.
</div>
</div>
With the following css:
.bigWrapper {
width: 1000px;
height: auto;
margin: auto;
}
.smallWrapper {
width: 500px;
height: auto;
margin: auto;
}
.sidebar {
width: 250px;
float: left;
height: auto;
}
Floating is the way to go for this. They will always stick together, unless the container is smaller than the sum of their widths.
Tip: make sure your container is wide enough to hold both inner divs; if not, and the user has a narrower window, they will show one below the other.