I have certain boxes which I want them to be side by side. I used float:left;margin-left:10px; and successfully achieve my aim.
But I want to lock their positions on screen i.e. fixed w.r.t to screen and no movements according to mouse. For that I tried to use `position:fixed', it too worked, but now it created a problem.
The problem is that the two boxes are now overlapping with each other and displaced with their location.
Her is the fiddle
.chatWindow {
display: inline-block;
position: relative;
width: 250px;
height: 280px;
bottom:0;
background: #FAFAFA;
margin-left: 10px;
margin-bottom:10px;
float: left;
border-radius: 3px;
border: 1px solid #7a7a7a;
z-index: 100000;
}
You can set the fixed property to parent div. Try this fiddle.
CSS
.chatWindow-parent{
position: fixed;
}
.chatWindow {
display: inline-block;
position: relative;
width: 250px;
height: 280px;
bottom:0;
background: #FAFAFA;
margin-left: 10px;
margin-bottom:10px;
border-radius: 3px;
border: 1px solid #7a7a7a;
z-index: 100000;
}
HTML
<div class="chatWindow-parent">
<div class="chatWindow"></div>
<div class="chatWindow"></div>
</div>
http://jsfiddle.net/2csBx/
You have to have 2 different classes. Otherwise by fixing the position you are telling them to be fixed in the same location.
Need to add a parent class
HTML
<div class="chatContainer">
<div class="chatWindow"></div>
<div class="chatWindow"></div>
</div>
CSS
body{
height: 2000px;
}
.chatContainer {
position: fixed;
bottom: 10px;
}
.chatWindow {
display: inline-block;
position: relative;
float: left;
width: 250px;
height: 280px;
bottom: 10px;
margin-left: 10px;
background: #FAFAFA;
border-radius: 3px;
border: 1px solid #7a7a7a;
z-index: 100000;
}
Try this fiddle: http://jsfiddle.net/ETwEF/2/
Related
I have an outer and inner box with position set to relative. What i want should look like this:
The code is:
body {
background-color: lightblue;
width: 100%;
height: 100%;
}
.outerbox {
position: relative;
float: left;
left: 30px;
top: 50px;
background: orange;
border: 2px solid red;
}
.innerbox {
position: relative;
float: left;
width: 100px;
height: 50px;
margin-left:100px;
margin-top:100px;
background: green;
border: 2px solid red;
}
<body>
<div class="outerbox">
<div class="innerbox">
</div>
</div>
</body>
Is it possible to get a similar result with margin:0 and changing only top and left values in innerbox?
With this style the outer div no more wraps the inner box:
CSS
.innerbox {
position: relative;
float: left;
width: 100px;
height: 50px;
margin: 0;
left: 100px;
top: 100px;
background: green;
border: 2px solid red;
}
Thank you.
* Update *
I would like to add that i don't want to fix the height of the outer box. Thanks.
Is it possible to get a similar result with margin:0 and changing only top and left values in innerbox?
Not really.
Relative positioning moves an element from it’s “default” position that it would normally have - but it keeps the original space it would have required reserved, it does not make it “take” the space at the position it was moved to. So while you can move the inner element to the place you want it, it will not make the outer element “grow” accordingly.
I don't want ("mis")use margin for positioning the inner div
Don’t worry about the “semantics of CSS” too much here … There is often more than one way to achieve a desired optical result, and seldom one way is “wrong” and the other one “right”.
As long as the solution you have achieves what you want, and is not hindered by other restrictions - use it!
When the outerbox has position: relative you can use position: absolute for the .innerbox so you can give dimensions to the .outerbox (width and height) and you can use top and left to position the inner rectangle on every position you want...
body {
background-color: lightblue;
width: 100%;
height: 100%;
}
.outerbox {
position: relative;
width:200px;
height:100px;
left: 30px;
top: 50px;
background: orange;
border: 2px solid red;
}
.innerbox {
position: absolute;
width: 100px;
height: 50px;
left:98px;
top:48px;
background: green;
border: 2px solid red;
}
<body>
<div class="outerbox">
<div class="innerbox">
</div>
</div>
</body>
Hope this will help you.
body {
background-color: lightblue;
width: 100%;
height: 100%;
}
.outerbox {
position: relative;
float: left;
left: 30px;
top: 50px;
background: orange;
border: 2px solid red;
height:200px;
width:300px;
}
.innerbox {
position: absolute;
float: left;
width: 100px;
height: 50px;
margin: 0;
/*left: 100px;
top: 100px; */
bottom:0;
right:0;
background: green;
border: 2px solid red;
}
<div class="outerbox">
<div class="innerbox">
</div>
</div>
So I have been a developer and pretty proficient at CSS and coding styling. There is a new design that has been approved and trying to figure out the best way to accomplish this. Here is a screenshot of what I am trying to achieve with drawing borders and lines but they need to extend both left and down:
https://cdn2.hubspot.net/hubfs/2323601/Epsilon_April2017/Images/Screen%20Shot%202017-05-02%20at%209.19.29%20AM.png
Does anyone have any insights on how to achieve this with HTML/CSS? Obviously going to tablet and mobile it would be removed, but on desktop they want to achieve this. I do not want to do a flattened image, but that is the only way I am leaning right now.
I have tried creating the lines as an image which i am placing below the left text
Is only playing with CSS
body{
background: black;
margin: 0;
}
.div{
position: relative;
width: 80%;
background: grey;
display: table;
margin-top: 50px;
}
.a,
.b{
display: table-cell;
color: white;
}
.a{
text-align: right;
font-size: 1.2em;
padding: 15px;
border-bottom: 2px solid white;
}
.b{
width: 140px;
}
.b div{
position: absolute;
background: pink;
font-size: 1em;
bottom: 0;
border: 2px solid white;
padding: 8px;
}
strong{
display: block;
width: 150px;
float: right;
}
.b div:before{
content: "";
display: block;
position: absolute;
width: 2px;
height: 50px;
background: white;
top: 100%;
left: -2px;
}
<div class="div">
<div class="a">OUR INDUSTRY-LEADING <br><STRONG>EXPERTS ARE READY TO</STRONG></div>
<div class="b"><div>GROW YOUR BUSSINES</div></div>
</div>
I am trying to design a landing page to link to 2 web apps. I am trying to make the design as visually attractive as possible. I think it would look good if the Divs containing the links were side-by-side at the centre of the screen, with their edges overflowing the left and right of the screen. I can then put a border-radius on them and some nice blocky colour:
Goal:
I have tried numerous options, including inline-block and overflow:hidden:
HTML
<div id="centre-pane">
<div class="app-btn">
<img src="icon.png">link text
</div>
<div class="app-btn">
<img src="icon2.png">link text
</div>
</div>
CSS
.app-btn
{
width:1000px;
height:320px;
display:inline-block;
border:10px solid black;
border-radius: 50px;
}
#centre-pane {
width:2000px;
margin:0 auto;
text-align:center;
overflow-x: hidden;
}
Is this possible? I have found several ways of getting them side-by-side (eg here) but nothing that also lets them overflow the screen.
Just using position absolute would do the trick.
I've added a wrapper but it may not be required.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body,
html,
.wrapper {
height: 100%;
}
.wrapper {
position: relative;
}
.btn {
width: 45%;
height: 30%;
background: lightblue;
border: 2px solid blue;
position: absolute;
top: 50%;
transform: translateY(-50%);
}
.left {
left: 0;
border-radius: 0 25% 25% 0;
border-left: none;
}
.right {
right: 0;
border-radius: 25% 0 0 25%;
border-right: none;
}
<div class="wrapper">
<div class="btn left"></div>
<div class="btn right"></div>
</div>
You can achieve this with absolute positioning and negative margins (for the right item). You'll have to fix the size of the body though in order to achieve the effect. I've also added individual classes to the first and second item respectively (.app-btn-1 and .app-btn-2):
body {
width: 2000px;
overflow-x: hidden;
}
.app-btn {
width:1000px;
height:320px;
position: absolute;
border:10px solid black;
border-radius: 50px;
overflow-x: hidden;
}
.app-btn-1 {
left: -500px;
text-align: right;
}
.app-btn-2 {
left: 100%;
margin-left: -500px;
}
DEMO
NOTE: For my demo to look right in jsfiddle, I've quartered the sizes so you can see the effect in the small window
Here is the code you need:
.menu {
display: inline-block;
height: 200px;
width: 40%;
margin-top: calc(50% - 100px);
border: 2px solid red;
background-color: brown;
color: black;
text-decoration: none;
transition: all 0.5s;
}
#left {
float: left;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
margin-left: -10px;
}
#right {
float: right;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
margin-right: -10px;
}
.menu:hover {
background-color: gray;
border-color: brown;
color: red;
}
<div class="menu" id="left">Left</div>
<div class="menu" id="right">Right</div>
I made a
JS Fiddle for you.
I want to make the following icon in CSS3 such that I can very the width and height of only ".circle" (or some other wrapper element, point is I want to adjust width and height in one place or even make it so that it automatically fits in any container regardless of width and height) without having to adjust any other CSS3 properties to make the "A" line up in the center.
What is the best way to do this? If you can recommend a better way to do the following it would be very appreciated. The issue with what I have is that changing ".circle"'s width and height to be smaller affects the positioning of the positioning of eveerything else forcing me to change .circle2's properties and .letter's properties until things line up.
CSS
.circle {
width: 100px;
height: 100px;
background: blue;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
cursor:pointer;
}
.circle2 {
width:80%;
height:80%;
border-radius: 50px;
position:relative;
top:5%;
left:5%;
border: 5px solid #FFF;
}
letter{
position:relative;
top:45%;
left:30%;
margin:auto;
cursor:pointer;
color: #fff;
font-size: 60px;
font-weight: bold;
display: inline-block;
line-height: 0px;
}
letter:before {
content: "A"
}
HTML
<div class="circle">
<div class="circle2">
<a class="letter"></a>
</div>
</div>
Have a look. The only thing that's tricky is the "A" font size. You could use a library like http://fittextjs.com/ to accomplish this fully.
http://jsfiddle.net/cSBw3/1/
Code is bellow and modified.
CSS3
.container {
width: 100px;
height: 100px;
text-align: center;
}
.circle {
width: 100%;
height: 100%;
background: blue;
cursor:pointer;
position: relative;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
}
.circle:after {
content:"";
display: block;
position: absolute;
/* width: 80%; height: 80%; */
top: 10%; bottom: 10%;
left: 10%; right: 10%;
border: 5px solid #FFF;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
}
.letter {
cursor:pointer;
display: block;
}
.letter:before {
content: "A";
display: block;
position: absolute;
bottom: 19%;
right: 19%;
font-size: 3em;
font-weight: bold;
color: #fff;
}
HTML
<div class="container">
<div class="circle">
<a class="letter"></a>
</div>
</div>
I use this template
<style>
#block_center{
position: absolute;
right: 210px;
left: 210px;
text-align: left;
border: 1px solid #000;
overflow: auto;
height: auto;
}
#block_right{
width: 200px;
border: 1px solid #000;
position: relative;
right: 3px;
text-align: left;
float: right;
}
#block_left{
position: relative;
left: 3px;
width: 200px;
border: 1px solid #000;
text-align: left;
float: left;
}
#block_content{
clear: both;
float: none;
width: 100%;
text-align: center;
overflow-y:auto;
overflow-x:auto;
height: auto;
/* margin-bottom: -50px; */
margin: auto;
}
#block_buttom {
background-color: blue;
/* z-index: -10; */
width: 100%;
height: 50px;
clear: both;
}
.clear {
clear:both;
overflow:hidden;
}
</style>
<div id="block_content">
<div id="block_center"> ARTICLE <br> article_ajax_content </div>
<div id="block_right"> Artile links </div>
<div id="block_left"> banner </div>
<div class="clear"></div>
</div>
<div class="clear"></div>
<div id="block_buttom"> some text info about site and 31px height img </div>
Problem that I having is that Article not only can be random height size but also there is ajax block of random size content going after it and I simply can't absolutely stick bottom div to stay in bottom after all content regarding browser window size, content size, ajax block size...
Can any one help me with how css (I do not want to use jQuery to pin bottom block to a fix y coordinate) should look like for my pattern of use?
Make all blocks relatively positioned and give the heights and widths using percentage rather than pixels.
Make sure the sum of all your height percentages is 100%(in case you want to cover the whole screen).
This ensures your page content covers the whole screen, irrespective of the screen resolution.
The relative sizes of each block is also kept the same across all resolutions.
The key is to use PERCENTAGE values and not PIXEL values.
To solve the Dynamic sized article data, just CSS the article div to have a scroll bar.
this is currently does want i want
<style>
#block_buttom {
margin-top: 10pt;
/* z-index: -10; */
width: 100%;
display: inline-block;
height: auto;
clear: both;
}
.page-buffer {
padding-top: 50px inherit;
height: 50px;
clear: both;
width: 100%;
}
.clear {
clear:both;
font-size:0;
overflow:hidden;
}
#block_content {
width:100%;
text-align:center;
}
#block_left {
position: relative;
top: 0px;
text-align: left;
float:left;
width: 10%;
min-width:210px;
height: auto;
padding: 3px;
}
#block_center {
text-align: left;
display: inline-block;
margin:0 auto;
width:70%;
min-width: 640px;
height: auto;
padding: 3px;
}
#block_right {
position: relative;
text-align: left;
float:right;
width: 10%;
min-width:210px;
height: auto;
padding: 3px;
}
</style>
on high resolution it looking very nice, on lower - still require some tuning with finding balance of center block size and spaces between fixed size left\right blocks