HTML Setup
<div id="fixed-wrapper">
<div id="header">
<h1>Site Name</h1>
</div>
<div id="leftCol"></div>
<div id="centerCol"></div>
<div id="rightCol"></div>
CSS:
#fixed-wrapper{
min-width: 1264px;
}
#header{
width: 100%;
height: 75px;
text-align: center;
}
#header h1
{
line-height: 75px;
}
#centerCol {
margin-left: 310px;
margin-right: 360px;
height: 100%;
min-width: 604px;
}
#rightCol {
width: 285px;
height: auto;
position: absolute;
top: 75px;
right: 0;
margin-right: 75px;
}
#leftCol {
width: 235px;
height: auto;
position: absolute;
top: 75px;
left: 0;
margin-left: 75px;
}
The issue is that the center column needs to have a min-width, but the right column shouldn't move into the center column.
Try set width of center column as auto rather define its minimum width,
#centerCol {
margin-left: 310px;
margin-right: 360px;
height: 100%;
width: auto;
}
Make #fixed-wrapper positioned relatively, so that the #leftCol and #rightCol are positioned absolutely with respect to it, rather than to the document body.
#fixed-wrapper{
min-width: 1264px;
position: relative;
}
jsFiddle example
Related
I have a fixed div inside of a relative positioned div. I want the div to be fixed to the top of the page and contained within my relative positioned parent.
A common example of this use case is a sticky website sidebar in a two column layout.
As I understand. Setting the top: 0 on my fixed div will fix it to the top. Setting margin-left: 0 on my fixed div will align it with its relatively positioned parent.
This works fine on all browsers except Safari (version < 10). Is there any way to fix this issue that doesn't involve user agent sniffing.
Here is a bare-minimum fiddle illustrating isolating issue below:
http://jsfiddle.net/vgc1ekbg/4/
Here's another fiddle illustrating the issue in the context of a two-column website layout: http://jsfiddle.net/dpmj3y0n/1/
Edited based on last fiddle shared in comments.
* {
box-sizing: border-box;
}
.wrapper {
max-width: 960px;
height: 2000px;
margin: 0 auto;
text-align: center;
/* line-height: 580px; */
}
.layout {
height: 2000px;
/*padding-left: 20px;*/
/* padding-right: 350px; */
/*margin-right: 192px;*/
}
.layout:before, .layout:after {
content: "";
display: table;
}
.layout:after {
clear: both;
}
.col-main {
width: calc(100% - 184px);
margin-left: -8px;
margin-top: -8px;
height: 580px;
float: left;
position: relative;
left: 200px;
background-color: #f16529;
line-height: 580px;
}
.col-sub {
/* margin-right: -100%; */
position: absolute;
top: 0;
left: 0;
width: 200px;
line-height: 580px;
/* height: 580px; */
background-color: #f0dddd;
float: left;
}
.sticky {
position: fixed;
top: 0;
left: 0;
width: 200px;
height: 100px;
overflow: hidden;
z-index: 100;
background-color: gray;
color: red;
line-height: 100px;
}
<div class="wrapper">
<div class="layout">
<div class="col-main">Main Content</div>
<div class="col-sub">Sidebar Content
<div class="sticky">
Sticky Content
</div>
</div>
</div>
</div>
if you intent to center align, you can use left: 50%; and transform: translateX(-50%); to both .column and .sticky
http://jsfiddle.net/vgc1ekbg/5/
My problem is that I wanted to have split page by two divs side by side (50% width). Inside of them I wanted to place another divs and make them aligned vertically and horizontally at the same time.
I think that it is possible to make it without JS, but I'm not able to do that.
Can anybody make my two circles placed in the center (V,H) of their parent DIV, which are 50% of width and 100% of height so that when I will resize my window the circles will always be in center (and side by side as is now)?
Here is my code:
<div id="container">
<div class="left">
<div class="kolo1">
sometext1
</div>
</div>
<div class="right">
<div class="kolo2">
sometext 2
</div>
</div>
</div>
And a JSFiddle for that: http://jsfiddle.net/m5LCx/
Thanks in advance in solving my quest :)
It's actually quite simple, all you need to do is to simulate a table-like behaviour:
HTML markup:
<div id="container">
<div>
<div class="half left">
<div class="circle">hello</div>
</div>
<div class="half right">
<div class="circle">world</div>
</div>
</div>
</div>
CSS styles:
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
#container {
display: table;
width: 100%;
height: 100%;
}
#container > div {
display: table-row;
}
.half {
display: table-cell;
width: 50%;
text-align: center;
vertical-align: middle;
}
.half.left {
background: red;
}
.half.right {
background: blue;
}
.circle {
display: inline-block;
padding: 50px;
border-radius: 50%;
}
.half.left .circle {
background: blue;
}
.half.right .circle {
background: red;
}
Final result http://jsfiddle.net/m5LCx/11/:
Working here http://jsfiddle.net/3KmbV/
add position: relative in .left and .right class and than add margin: auto; position: absolute; top: 0; left: 0; right: 0; bottom: 0; in .kolo1 and .kolo2 class. and remove top position from .left class
try it
body {
background-color: #006666;
margin: 0 auto;
height: 100%;
width: 100%;
font-size: 62.5%;
}
#container {
width: 100%;
min-height: 100%;
height: 100%;
position: absolute;
}
.left {
width: 50%;
min-height: 100%;
float: left;
top: 0;
background-color: #660066;
position: relative;
}
.right {
width: 50%;
min-height: 100%;
float: right;
min-height: 100%;
background-color: #003366;
position: relative;
}
.kolo1 {
background-color: #0f0;
width: 10em;
height: 10em;
border-radius: 5em;
line-height: 10em;
text-align: center;
margin: auto;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.kolo2 {
background-color: #00f;
width: 10em;
height: 10em;
border-radius: 5em;
line-height: 10em;
text-align: center;
margin: auto;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
you can give postion: relative to .left and .right.
and give below CSS for to .kolo1 and .kolo2
margin: -5em 0 0 -5em;
position: absolute;
left: 50%;
top: 50%;
Updated demo
Another fiddle. This one uses absolute positioning with negative margins to ensure the circles are always in the centre. CSS looks like this
.kolo1 {
position: absolute;
top: 50%;
left: 50%;
margin-left: -5em; /* this must be half of the width */
margin-top: -5em; /* this must be half of the height */
}
As #Tushar points out, you need to set the position of the parent element to relative also.
Working Fiddle
.kolo1 {
background-color: #0f0;
width: 10em;
height: 10em;
border-radius: 5em;
line-height: 10em;
text-align: center;
margin: 50% auto 0 auto;
}
.kolo2 {
background-color: #00f;
width: 10em;
height: 10em;
border-radius: 5em;
line-height: 10em;
text-align: center;
margin: 50% auto 0 auto;
}
Try adding padding-top:50% for parent divs (having class left and right)
So I have a header which is set to 100% width on my page and I want to put text on the banner and stay in place but when I zoom in and out the position of the text changes. How do I make it so that the text stays place to the place I set it and zooming in and out does not affect it?
Fiddle : jsfiddle.net/5ASJv/
html
<div id="wrap">
<div class="right">
Hey <br />
What is up <br />
</div></div>
css
* {
margin: 0 auto;
}
#wrap {
height: 150px;
width: 100%;
background: url(http://froggyadventures.com/wp-content/uploads/galleries/post-93/full/placeholder%20-%20Copy%20(2).gif) no-repeat center;
text-align: center;
background-color: #FFF;
}
.right{
width: 400px;
height: 110px;
position: relative;
z-index: 999;
top: 100px;
left: 100px;
}
Try this:
* {
margin: 0 auto;
}
#wrap {
height: 150px;
width: 100%;
background: url(http://froggyadventures.com/wp-content/uploads/galleries/post-93/full/placeholder%20-%20Copy%20(2).gif) no-repeat center;
text-align: center;
background-color: #FFF;
position: relative;
}
.right{
width: 400px;
height: 110px;
position: absolute;
z-index: 999;
top: 100px;
left: 100px;
}
i want to place the div according to the image displayed . The top ones have been done however not able to place the bottom two my current style sheet is as follows:
#container {
position: relative;
height: 400px;
width: 100%;
min-width: 400px;
margin: 0 auto;
}
#left, #right {
position: absolute;
bottom: 201px;
}
#left {
left: 0;
width: 484px;
height: 195px;
}
#right {
right: 0;
width: 508px;
height: 196px;
}
One more thing my container contains all the divs
Someone please help
Something similar to this - JSFiddle ?
HTML:
<div class="row">
<div class="col1">One</div>
<div class="col2">two</div>
</div>
<div class="row">
<div class="col1">One</div>
<div class="col2">two</div>
</div>
CSS:
.row{ overflow: hidden; margin: 4px; }
.col1, .col2{ float: left; width: 250px; height: 100px; }
.col1{ background: red; }
.col2{ background: green; }
Ok, I want this:
For that, I have this HTML code:
<div id="wrapForCenter">
<div id="title">
title
</div>
<div id="contentFrame">
<div id="imagePlaceholder">
image
</div>
<div id="content">
content
</div>
</div>
<div id="buttonsBar">
buttonsBar
</div>
</div>
And I have this CSS code:
#wrapForCenter
{
position: absolute;
top:50%;
left: 50%;
margin-top: -160px;
margin-left: -240px;
width: 480px;
height: 320px;
border: 1px solid black;
}
#title
{
width: 100%;
height: 40px;
background-color: Blue;
}
#contentFrame
{
height: 240px;
width: 480px;
}
#imagePlaceholder
{
float: left;
width: 100px;
height: 100%;
background-color: Green;
}
#content
{
float: left;
width: 380px; /*<-- look at this*/
height: 100%;
background-color: Yellow;
overflow: auto;
}
#buttonsBar
{
clear: left;
width: 100%;
height: 40px;
background-color: Silver;
}
If I change the contents width to 100%, why occurs this?
What I spect is that content width would be contentFrame minus imagePlacehoder width in pixels, but when I specify float:left for both, imagePlacehoder and content, content gets its parent container width. Why?
Is there another way to get the same result without using float (maybe display:inline)? And using width:100% for content?
Thank you very much. CSS is not my strenght.
This is called a float drop. Floats work such that they'll fit side-by-side as long as there's enough room for each, but a float will bump down below the previous one if there's not enough room for it to fit.
width:100% means make it 100% as wide as its container (#wrapForCenter). Naturally, if you tell something to be the entire width of it's container, nothing can fit along either side inside of that container, so as a float it must move down below whatever is before it (an earlier "sibling") to fit.
A question similar to this was asked by me myself in stackoverflow before.
How to auto adjust (stretch) div height and width using jQuery or CSS
You can set HTML like;
<div id="container">
<div id="top"></div>
<div id="left"></div>
<div id="right"></div>
<div id="bottom"></div>
</div>
And CSS like;
#container {
position: relative;
width: 300px;
height: 200px;
}
#top, #left, #right, #bottom {
position: absolute
}
#top {
top: 0;
width: 100%;
height: 50px;
background: #00b7f0
}
#left {
top: 50px;
width: 50px;
bottom: 50px;
background: #787878
}
#right {
top: 50px;
left: 50px;
right: 0;
bottom: 50px;
background: #ff7e00
}
#bottom {
bottom: 0;
width: 100%;
height: 50px;
background: #9dbb61
}
Here is the working demo.
Hope this helps..
Note: I recommend (not forcing) you to do a search in stackoverflow before asking questions.
You should set your image holder to 25% and your content to 75%, or if you know how much space you have allocated for your entire content area(picture and content) then subtract 100 from that and use that many pixels. but overall this should work
#wrapForCenter {
position: absolute;
top: 50%;
left: 50%;
margin-top: -160px;
margin-left: -240px;
width: 480px;
height: 320px;
border: 1px solid black;
}
#title {
width: 100%;
height: 40px;
background-color: Blue;
}
#contentFrame {
height: 240px;
width: 480px;
}
#imagePlaceholder {
float: left;
width: 25%; /* See Here */
height: 100%;
background-color: Green;
}
#content {
float:right;
width: 75%; /* And here */
height: 100%;
background-color:Yellow;
}