I have a a design problem. I have a centered logo on a page, What I want is a div centered between the left side of the page and te left side of the logo.
how could I achieve this using only css ?
Here is the example:
Take a look at this demo...
http://jsfiddle.net/UnsungHero97/7Z5fu/
HTML
<div id="wrapper">
<div id="box-left">
<div id="left"></div>
</div>
<div id="box-center">
<div id="center"></div>
</div>
</div>
CSS
html, body {
margin: 0 !important;
padding: 0 !important;
}
#wrapper {
width: 100%;
}
#box-center, #box-left {
width: 50%;
float: left;
}
#left {
border: 1px solid magenta;
height: 50px;
width: 50px;
position: relative;
left: 50%;
/* half of width of #left + half of margin-left of #center */
margin-left: -75px; /* 50/2 + 100/2 = 25 + 50 = 75 */
}
#center {
border: 1px solid magenta;
height: 50px;
width: 200px;
margin-left: -100px;
}
I hope this helps.
It will work if the logo width can be fixed, here’s the code.
HTML:
<div id="logo"><img src="https://encrypted.google.com/images/logos/ssl_logo.png"></div>
<div id="otherdiv"><img src="https://encrypted.google.com/images/logos/ssl_logo.png"></div>
CSS:
#logo {
width: 100px;
height: 50px;
position: absolute;
top: 50px;
left: 50%;
margin-left: -50px;
text-align: center;
}
#otherdiv {
text-align: center;
position: absolute;
top: 50px;
left: 0;
width: 50%;
margin-left: -50px; /* Half of the logo width */
}
#logo img,
#otherdiv img {
width: 100px;
}
#otherdiv img {
margin-left: 50px; /* Half of the logo width */
}
Here i have separate two divs that left and right, there is one div inside of the leftDiv that is X_div make it as width:20% and margin:0 auto. if resolution extend, x_div will also extend as per your requirement.
#leftDiv {
width:30%;
height:auto;
}
#leftDiv X_Div {
width:20%;
height:auto;
margin:0 auto;
}
#rightDiv {
width:70%;
height:auto;
}
Related
I have one outer div and two children divs. I want the outer div fixed to the window, one child div to the left most of the parent div and another to the right most of the parent div.
When I position: fixed the parent, it is fixed to the window but the two child divs stick to the left and overlap. If I position: relative the parent, the two child divs stick to the left and right respectively but it is not fixed to the top of the window.
How can I do it? Thanks!
<div class="nav-wrapper">
<div class="child1"></div>
<div class="nav-pages"></div>
</div>
My css:
nav {
#media only screen and (min-width: 0) {
height: 3em;
.nav-wrapper {
padding: .7em 1em 0 1em;
}
}
#media only screen and (min-width: $medium-screen) {
height: 500px;
.nav-wrapper {
padding: 0em 1em 0 1em;
height: 64px;
position: relative;
background-color: rgba(60,63,65,0.22);
}
}
}
nav {
background-image: url("http://image.insider-journeys.com/overview/china.jpg");
background-size: cover;
}
.navbar-non-link {
padding: 0 15px;
}
.nav-pages {
padding-right: 0px;
}
.side-nav {
width: 500px;
}
Try This:
body {
height: 1200px;
}
.parent {
position: fixed;
background-color: red;
height: 100px;
width:100%;
}
.child1 {
background-color: green;
width: 100px;
height: 100px;
position: absolute;
left: 0;
}
.child2{
background-color: blue;
width: 100px;
height: 100px;
position: absolute;
right: 0;
}
<div class="parent">
<div class="child1"></div>
<div class="child2"></div>
</div>
Something like this:
body {
width: 100%;
min-height: 1000px;
margin:0px;
padding:0px;
}
div {margin:0px;padding:0px;}
.wrapper {
border: 1px solid black;
width: 100%;
position: fixed;
height:50px;
top:0px;
}
.parent {
position: fixed;
width: 20%;
height: 50px;
background: red;
overflow:hidden;
top:1px;
right:40%;
}
.child1 {
position: fixed;
left: 20%;
top: 1px;
height: 50px;
width:20%;
background: green
}
.child2 {
position: fixed;
right: 20%;
top: 1px;
height: 50px;
width: 20%;
background: green
}
<body>
<div class="wrapper">
<div class="parent">parent
<div class="child1">child1</div>
<div class="child2">child2</div>
</div>
</div>
</body>
I need to make something like this , how can I make the square on the middle between this two? Here is the CSS and Photo
My Css
#up{
width:100%;
height:30%;
}
#down{
width:100%;
height:70%;
}
#square{
width:40px;
height:40px;
}
Can I setting the square without counting the percentage of the location of the middle line? (because I want to add all something like this into all sessions of the web , and the height of the session will responsive by the text length
You need to use position relative to outer div and position relative to inner div
here is the link how can you do it
fiddle
.one,
.two,
.three {
width: 100%;
height: 50px;
}
.one {
background: yellow;
position: relative;
}
.two {
background: green;
}
.three {
background: red;
}
.square {
position: absolute;
bottom: -10px;
right: 30px;
height: 20px;
width: 20px;
background: white;
}
<div class="one">
<div class="square">
</div>
</div>
<div class="two">
</div>
<div class="three">
</div>
You can have a <div> square as:
<div id="div1"></div>
in CSS:
#div1{
border: 1px red;
height: /*enter the height */
width: /* enter the width */
position: relative;
left: /*enter the distance */
right: /*enter the distance */
top: /*enter the distance */
bottom: /*enter the distance */
z-index: 100 /* make sure other div's have z index lesser than this div's */
}
Put the square INTO the second div, give it a position: absolute and a top: -20px (and left: Xpx- i.e. whatever you need/want).
You can easily do this with position:absolute to your small box div.
Here is the solution that can help you
body,
html {
height: 100%;
margin:0px;
}
#up {
width: 100%;
height: 30%;
background: red;
}
#down {
width: 100%;
height: 70%;
background: blue;
}
#square {
width: 40px;
height: 40px;
background: green;
position: absolute;
top: calc(30% - 20px);
margin: 0px auto;
left: 0px;
right: 0px;
z-index: 1;
}
<div id="up"></div>
<div id="down"></div>
<div id="square"></div>
I have 2 divs next to each other.
The wrapper size is width:100%.
The right aligned div is 230px.
The div that is next to the right aligned one needs to be centered in the container to remain responsive.
The left margin was just temporary because it was hugging the left aligned div.
CSS
.wrapper{
width: 100%;
margin: 0 auto;
}
.col-browse{
float: left;
width: 230px;
}
.col-content{
float: left;
width: 1080px;
margin-left: 30px;
}
HTML
<div class="col-browse">
</div>
<div class="col-content">
</div>
Thanks!
EDIT: http://i.imgur.com/8Y7XXAx.png
This is what im getting and i need the middle part to be centered while keeping the left column snapped to left
you can try the below css code.
.wrapper{
width: 100%;
margin: 0 auto;
}
.col-browse{
float: right;
width: 18%;
border: 1px solid #cccccc;
height: 100px;
}
.col-content{
width: 82%;
margin:0 auto;
border: 1px solid #000;
height: 100px;
}
Define width of container of where element will be centered within (this element position: relative; centered element will simply be inside of previous mentioned and margin: 0 auto; have div which is not to be within container (right div), simply float:right; outside of.
Try CSS below:
html,body,.wrapper{
width: 100%;
margin: 0 auto;
}
.wrapper{
position:relative;
}
.col-browse{
position:absolute;
text-align:center;
width: 230px;
}
.col-content{
text-align:center;
width: 1080px;
margin-left: 30px;
}
Demo
If you want it to be centered in all screen sizes then try following fiddle:
Demo2 (Updated)
The following example could help you achieve the style you want
the CSS
.l,.r{
width:30%;
height:200px;
background:red;
}
.l{
float:right;
}
.r{
margin:0 auto;
}
.wrap{
float:left;
width:70%;
background:blue;
}
the html
<div class="wrap">
<div class="r"></div>
</div>
<div class="l"></div>
working Example JSFIDDLE
try using relative values (percent), this will help you to create a responsive website. The example:
http://jsfiddle.net/XkPay/
.wrapper{
width: 100%;
}
.col-browse{
float: left;
width: 18%;
background-color:black;
}
.col-content{
float: left;
width: 82%;
background-color:red;
}
probably this is what you need..
FIDDLE
.wrapper{
width: 100%;
height:500px;
margin: 0 auto;
background-color:Yellow;
}
.col-browse{
float: left;
width: 20%;
height:500px;
background-color:Red;
}
.col-content{
width: 80%;
height:500px;
margin-left:21%;
background-color:Blue;
}
This attempt keeps the width of the sidebar and the width of the centered content constant.
HTML
<div class="right">
<div class="center"></div>
</div>
<div class="left"></div>
Centered to window
Fiddle
CSS
div.left {
float: left;
width: 230px;
height: 20px;
position: relative;
}
div.right {
height: 20px;
position: absolute;
left: 0;
right: 0;
}
div.center {
height: 50px;
width: 50px;
margin: 0 auto;
}
Centered to column
Fiddle
CSS
div.left {
float: left;
width: 230px;
height: 20px;
}
div.right {
height: 20px;
position: absolute;
right: 0;
left: 230px;
}
div.center {
height: 50px;
width: 50px;
margin: 0 auto;
}
Note: I would recommend centered to column, personal design preference. If you center to window the blank space would be off-balance. Again, just my opinion.
I am trying to design a page with a header, a main div that stretches to 100% of the vertical landscape (minus header and footer) and a footer. Like this pic:
I can get the header and main div to work. Like this:
<div id="wrapper">
<div class="header_div">HEADER</div>
<div class="main_div">MAIN</div>
<div class="footer_div">FOOTER</div>
</div>
With this CSS:
html {
height: 100%;
}
body {
margin: 0;
padding: 0;
height: 100%;
}
.header_div{
height: 40px;
width: 100%;
background-color: #000000;
}
.main_div{
margin-bottom:40px;
margin-top:40px;
position:absolute;
top:0px;
left:0px;
right:0px;
bottom:0px;
background-color: red;
}
.footer_div{
position: relative;
height: 40px;
width: 100%;
background-color: blue;
}
So the main div starts 40px off the top to account for the header and then stops 40px from the bottom to account for the footer. This works well but I cannot get the footer div to show below the main div. The way it is now with position: relative it's putting the footer on top of the main div. If I use position:absolute it puts it underneath the main div.
I am sure I am just doing this wrong because CSS is not my thing.
Any help on this would be great.
Thanks
Using CSS3 Flexbox:
/*QuickReset*/*{margin:0;box-sizing:border-box;}
body { /* body - or any parent wrapper */
display: flex;
flex-direction: column;
min-height: 100vh;
}
main {
flex: 1;
}
<header>HEADER</header>
<main>MAIN</main>
<footer>FOOTER</footer>
Use the css calc() function.
With this method, you don't have to define the position of the elements
Here is a demo
html:
<header>Header</header>
<main>Main</main>
<footer>Footer</footer>
css:
html, body {
height: 100%
}
body {
color: #FFF;
padding: 0;
margin: 0;
}
header {
background-color: #000;
height: 100px;
}
main {
background-color: #AAA;
height: calc(100% - 150px);
}
footer {
background-color: #000;
height: 50px;
}
Here's a simple method. Try this jsfiddle: http://jsfiddle.net/PejHr/
HTML:
<div id="top"></div>
<div id="main">
<div id="inner"></div>
</div>
<div id="bottom"></div>
CSS:
#main {
width: 100%;
height: 100%;
position: absolute;
left: 0px;
top: 0px;
padding: 50px 0px
}
#inner {
width: 100%;
height: 100%;
background: #f0f;
}
#top, #bottom {
width: 100%;
height: 50px;
background: #333;
position: absolute;
top: 0px;
left: 0px;
}
#bottom {
bottom: 0px;
}
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;
}