I'm trying to keep the rotated block to align on top of remaining blocks in the right side of the window.
fiddle: https://jsfiddle.net/8tbL6rqs/1/
<div class="side">
<div class="block-first">Chat with us</div>
<div class="block">Phone</div>
<div class="block">Mail</div>
<div>
.side {
position:absolute;
right:0px;
margin-top:30%;
}
.block, .block-first {
background: #f00;
display: block;
height: 50px;
width:50px;
text-align:center;
line-height:50px;
}
.block-first {
width:200px!important;
transform: rotate(-90deg);
}
Add the following css to .block-first:
position:relative;
top:-75px;
left:-75px;
Here's an updated fiddle.
Related
This is the HTML I have :
<div class="image">Image</div>
<div class="legend">
Legend<br/>
width variable height<br/>
the middle of the legend need to be exactly on the bottom of the image, regardless of the height of the legend and image
</div>
<div class="following">The following text should follow immediatly the legend,regardless of the height of the legend or the image</div>
This is the result I want :
This is what I tried :
.image {
height:100px;
background-color:red;
}
.legend {
transform:translateY(-50%);
background-color:blue;
width:300px;
margin:0 auto
}
.following {
background-color:yellow;
margin-top:-45px;
}
This is the result I got :
Problem is : I don't wan't to have this margin between legend and following text.
The whole attempt codepen is here
Question : any solution to get the desired result without JS ?
(for the record : this is a solution with JS)
Do you know the height of the element? Do you need it to be exactly 50%?
Here is an example with a fixed 50px-negative top margin:
.image {
height:100px;
background-color:red;
}
.legend {
background-color:blue;
width:300px;
margin:-50px auto 0;
}
.following {
background-color:yellow;
}
<div class="image">Image</div>
<div class="legend">
Legend<br/>
width variable height<br/>
the middle of the legend need to be exactly on the bottom of the image, regardless of the height of the legend and image
</div>
<div class="following">The following text should follow immediatly the legend, regardless of the height of the legend or the image</div>
Another option (which is probably not exactly what you are looking for) but it's a nice solution :)
.image {
height:100px;
background-color:red;
}
.legend {
background-color:blue;
width:300px;
margin:0 auto;
transform: translateY(-50%) translateX(-50%);
position: absolute;
left: 50%;
}
.legend:after {
content: attr(following);
display: block;
width: 100vw;
clear: both;
position: absolute;
background-color:yellow;
height: auto;
transform: translateX(-50%);
left: 50%;
}
.following {
}
<div class="image">Image</div>
<div class="legend" following="The following text should follow immediatly the legend, regardless of the height of the legend or the image">
Legend<br/>
width variable height<br/>
the middle of the legend need to be exactly on the bottom of the image, regardless of the height of the legend and image
</div>
You can do this with simple positioning, wrapping your legend and the following text with a div and make its position:relative and following can be set as position:absolute
check this snippet
.image {
height: 100px;
background-color: red;
}
.legend {
transform: translateY(-50%);
background-color: blue;
width: 300px;
margin: 0 auto;
}
.following {
background-color: yellow;
position: absolute;
top: 50%;
width: 100%;
}
.container {
position: relative;
left: 0;
}
<div class="image">Image</div>
<div class="container">
<div class="legend">
Legend
<br/>width variable height
<br/>the middle of the legend need to be exactly on the bottom of the image, regardless of the height of the legend and image
</div>
<div class="following">The following text should follow immediatly the legend,regardless of the height of the legend or the image</div>
</div>
Another solution with flexbox
.image {
height:100px;
background-color:red;
}
.item{
transform:translateY(-50%);
}
.center {
background-color:blue;
width:300px;
margin:0 auto;
}
.Aligner {
display: flex;
flex-direction:column;
}
.Aligner-item--top {
width:100%;
background:red;
}
.following {
width:100%;
background-color:yellow;
}
<div class="Aligner">
<div class=" Aligner-item Aligner-item--top image">Image</div>
<div class="item">
<div class="Aligner-item center">Legend<br/>
width variable height<br/>
the middle of the legend need to be exactly on the bottom of the image, regardless of the height of the legend and image</div>
<div class="Aligner-item Aligner-item--bottom following">The following text should follow immediatly the legend,regardless of the height of the legend or the image</div>
</div>
</div>
Hope this helps
I need to do a website top with some navegations tools.
It is working but I'm not confortable with. I think maybe it is not the right way to do these floating divs on the right.
I need an image on the left and two itens on the right of a full width div.
So I did:
<div id="menu">
<div id="logo">LOGO</div>
<div id="item">Settings</div>
<div id="item">Options</div>
</div>
and
#menu{
position:fixed;
width:100%;
height:50px;
background:#fff;
}
#logo{
float:left;
right:30px;
}
#item{
float:right;
right:30px;
margin-right:10px;
}
Is it ok with float right and everything else or should I change something?
jsfiddle
on #item the right:30px does nothing if you dont specify the postion. Use
#item{
float:right;
position:relative;
right:30px;
}
Flexbox...no need for floats or positioning at all....and the items are in the right order.
#menu {
position: fixed;
width: 100%;
height: 50px;
background: #fff;
display: flex;
}
.logo {
margin-right: auto;
}
.item {
margin-right: 10px;
}
<div id=menu>
<div class="logo">LOGO</div>
<div class="item">Settings</div>
<div class="item">Options</div>
</div>
I want to achieve this particular display by CSS:
I need to put there various texts and the lines to fill the white space that is left on right and left.
So far I got to this http://jsfiddle.net/g5jtm/, however there are several issues that I encounter:
the width of the text is variable and if I get out the width:40%; it will reset the width of the other 2 lines
The display:table does not allow me to align the lines through the middle of the text
HTML:
<div class="container">
<div class="lines l1"></div>
<div class="copy">Consumer review</div>
<div class="lines l2"></div>
</div>
CSS:
.container {width:100%; display:table; position:relative; height:100px;}
.lines, .copy {display:table-cell;vertical-align: middle;width:auto; }
.copy { white-space: nowrap; padding:3px; text-align:center; font-size:24px; width:40%;}
.l1,.l2 {border-bottom:1px solid red; height:50px; }
Here's one way with pseudo-elements
Codepen Demo
HTML
<div class="wrapper">
<h1 class="line">Consumer Review</h1>
</div>
CSS
.wrapper {
width:50%;
margin:0 auto;
}
.line {
display: table;
white-space: nowrap;
}
.line:before,
.line:after {
background: linear-gradient(to bottom, #9FD35F, #4F8C31) no-repeat center / 98% 3px;
content: '';
display: table-cell;
width: 50%;
}
How about a horizontal line tag
html:
<div class="container">
<div class="lines l1"><hr></div>
<div class="copy">Consumer review</div>
<div class="lines l2"><hr></div>
</div>
css:
.container {width:100%; display:table; position:relative; height:100px;}
.lines, .copy {display:table-cell;vertical-align: middle;width:auto; }
.copy { white-space: nowrap; padding:3px; text-align:center; font-size:24px; width:40%;}
hr {color:red}
I want to fill the sides of a centered div with another div or span on each side.
I'm using margining to center the div as shown in this fiddle.
HTML
<div id='A>
<div id='Ad'>
</div>
</div>
CSS
#A{
z-index: 3000;
position: fixed;
width: 100%;
height: 40px;
background: rgba(0,0,0,0.05);
}
/*
div or span to the left
*/
/*
centered div
*/
#Ad{
z-index: 3000;
width: 400px;
height: 40px;
margin-left: auto;
margin-right: auto;
border-left: solid 1px #ff0000;
border-right: solid 1px #ff0000;
}
/*
div or span to the right
*/
How can I have a div that always takes up the remaining space on the left and another div that takes up the remaining space on the right.
Clarification:
Center column needs to be constant width. Left and Right Columns vary with the window size.
This would achieve what you want - it allows you to have a fixed width central div with left and right columns that fill up the remaining space:
HTML:
<div id="A">
<div id="Ad">Centre</div>
<div id="left">Left</div>
<div id="right">Right</div>
</div>
CSS:
#A {
z-index: 3000;
position: fixed;
width: 100%;
height: 400px;
background: rgba(0, 0, 0, 0.05);
}
/*
centered div
*/
#Ad {
z-index: 3000;
width: 400px;
height: 400px;
margin-left: auto;
margin-right: auto;
border-left: solid 1px #ff0000;
border-right: solid 1px #ff0000;
}
#left, #right {
position:absolute;
left:0;
top:0;
right:50%;
margin-right:200px;
background:#F00;
height: 400px;
}
#right {
left:50%;
right:0;
margin-left:200px;
margin-right:0;
}
The key is that the margin on the left/right is half of the central column's total width, so adjust it to take into account any borders or padding.
Working example: http://jsfiddle.net/2AztF/
I would just use 3 <div>s floated within the main container
HTML:
<div id='A'>
<div id='AdLeft'></div>
<div id='Ad'></div>
<div id='AdRight'></div>
</div>
CSS:
#A { overflow:auto }
#AdLeft { float:left; width:25%; }
#Ad { float:left; width:50%; }
#AdRight { float:left; width:25%; }
Here is a modified jsfiddle.
Make 3 divs :
<div id="A"></div>
<div id="B"></div>
<div id="C"></div>
<div style="clear:both"></div>
CSS:
#A,#B,#C{
float:left;
width:10%;
}
#B{
width:80%;
}
Here, B is you main div.
It is good practice to clear when you use float property.
To fill space on the right and left side of your div code use and make sure you have no margin or padding on those sides.
float:right;
float:left;
HTML:
<div class='container'>
<div class='left'></div>
<div class='center'></div>
<div class='right'></div>
</div>
CSS:
.container { overflow: hidden; margin:0; padding:0; }
.right { float: right; width: 150px; }
.center{ float: right; width:50px; margin-right: 50px; }
.left{ float: left; width: 150px; }
The margin-right of .center will fill the space accordingly.
I need to define a div which must stay with the top at the normal position, which differs from the top of the surrounding element:
position:relative
top:0
and which grows in the height up to the size of the surrounding element:
position:absolute
bottom:0
I have no idea how to combine the both. Whenever I use a relative box I loose the absolute bottom and whenever I use an absolute box I loose the relative top.
Can anybody help me how to do this in CSS?
Here is an example:
<html>
<head>
</head>
<style type="text/css">
#media screen {
body {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: 0;
padding: 0;
}
#head {
background-color: gray;
}
#rel {
background-color: green;
position: relative;
top: 0;
bottom: 0;
float: left;
}
#abs {
background-color: red;
position: absolute;
top: 0;
bottom: 0;
float: left;
}
}
</style>
<body>
<div id="head">
<h1>Head</h1>
</div>
<div id="abs">
<h2>absolute</h2>
</div>
<div id="rel">
<h2>relative</h2>
</div>
</body>
</html>
"relative" does not grow at all and "absolute" grows too much.
div {
top:0;
height:100%; /* height calculated based off the height of parent element */
margin:0;
}
height property CSS
Use display:table on the outer div and display table-row on the inner ones:
See this fiddle: http://jsfiddle.net/JKQ2y/15/
Html:
<div class="outer">
<div class="rel">
<div class="m b">text</div>
</div>
<div class="inner">
<div class="m r"></div>
</div>
</div>
Css:
.outer{
border:1px solid black;
height:100px; width: 100px
display:table;
}
.rel {
height:30px;
display:table-row;
}
.inner {
border: 1px solid red;
position:relative;
display:table-cell;
}
.m {height:100%;}
.m.b {border:1px solid blue;}
.m.r {border:1px solid red;}
HTML:
<div class="body">
<div class="head">
<div class="head-content">text</div>
</div>
<div class="growing-area">
</div>
</div>
CSS:
.body{
height:100px; width: 100px;
display:table;
}
.head {
height:0px;
display:table-row;
}
.growing-area {
position:relative;
display:table-cell;
}
defining a small height of the head is important but the real size is then controlled by the content or you can define the head-content height:
.head-content {
height:30px;
}
Fiddle: http://jsfiddle.net/JKQ2y/36/