There is a really simple solution to this I'm sure, but I can't find it.
I want some body text to wrap around two divs - an infobox at the top left, and a pullquote on the right 25% of the way down.
<div class="A">
<div class="B">
Infobox
</div>
<div class="D">
Lorem ipsum...
</div>
<div class="C">
Pullquote
</div>
</div>
I have no problem getting it to wrap around the infobox, but the pullquote gets pushed to the bottom. I can fix its position but then the text runs behind it.
This is my CSS
.A {
height: 100em;
width:100%;
background-color: red;
}
.B {
height: 2em;
width: 20%;
float: left;
background-color: blue;
}
.C {
height: 2em;
width: 20%;
float: right;
position: relative;
top: 25%;
background-color: green;
}
.D {
}
What am I doing wrong?
If I understand well you are having problems putting the pull quote on the top right, 25% down. If you want the Lorem ipsum on the right hand side of your info box then do this
.A {
border-top: 50px;
position: relative;
height: 100vh;
width:100%;
background-color: red;
}
.B {
height: 2em;
width: 20%;
float: left;
background-color: blue;
}
.C {
height: 2em;
width: 20%;
float: right;
position: absolute;
top: 25%;
right: 0;
background-color: green;
}
.D {
float: left;
}
Related
I am trying to overlap two elements using only CSS.
So far I have found one way of doing this. I am however wondering if there are other/better ways of accomplishing this.
The only method I have found, when moving two elements closer vertically, is to subtract a bottom-margin from te bottom element. This is to account for the left over space - and then to subtract the same margin from the upper element to move it down. I have not used this method before and I wonder if it is the best way of accomplishing this overlapping effect?
body {
width: 100%;
height: 100%;
background: lightgrey;
}
.bottom, .top{
width: 20%;
padding-bottom: 20%;
}
.top {
background: blue;
margin-bottom: -250px;
}
.bottom {
padding-top:250px;
margin-bottom: -250px;
background: red;
overflow: hidden;
border-top-left-radius: 50%;
border-top-right-radius: 50%;
}
<div class="top"></div>
<div class="bottom"></div>
html, body {
margin: 0;
padding: 0;
}
.parent {
position: relative;
width: 20%;
}
.child {
height: 200px;
background-color: blue;
}
.child--foreground {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background-color: red;
border-radius: 30px;
}
<div class="parent">
<div class="child child--background">
Background
</div>
<div class="child child--foreground">
Foreground
</div>
</div>
if you're trying to place an element over another, I think you should use positioning https://css-tricks.com/almanac/properties/p/position/
I think that's more simple
body {
width: 100%;
height: 100%;
background: lightgrey;
}
.bottom, .top{
width: 20%;
padding-bottom: 20%;
}
.top {
background: blue;
}
.bottom {
background: red;
border-radius: 50% 50% 0 0;
padding-top: 250px;
transform: translateY(-50%);
}
<div class="top"></div>
<div class="bottom"></div>
I am not sure how to properly phrase this question, so bear with me while I try and explain.
I am working on a layout that is two columns but with three divs and using the Bootstrap framework. The first div is pushed to the right, the second div is pulled to the left. The third div I want it pulled to the right and set flush to the bottom of the first div. Right now the top of the third div is sitting at the bottom of the second div.
The reason why I want it laid out this way is so when viewing on a desktop there will be two columns but when viewing on a mobile devices it will shrink down to one column and the third div will be below the content in the second div.
<div class="container">
<div class="div1">DIV1. This will be on the right</div>
<div class="div2">DIV2. This will be on the left</div>
<div class="div3">DIV3. This will be on the right</div>
</div>
Full CSS here: http://jsfiddle.net/m8z37q0y/1/
Remove the position: relative; properties or add it to the container as well. Then actually use float: right; on div1 and div3 and remove the right/left properties:
.container {
width: 400px;
height: 250px;
background: #ccc;
}
.div1 {
width: 100px;
height: 100px;
background: #eee;
float: right;
}
.div2 {
width: 300px;
height: 200px;
background: #aaa;
float: left;
}
.div3 {
width: 100px;
height: 100px;
background: #777;
float: right;
}
See the DEMO
http://jsfiddle.net/m8z37q0y/7/
.container {
width: 400px;
height: 250px;
background: #ccc;
}
.div1 {
width: 100px;
height: 100px;
background:green ;
left: 300px;
float: right;
}
.div2 {
width: 300px;
height: 200px;
background: blue;
right: 100px;
float: left;
}
.div3 {
width: 100px;
height: 100px;
background: red;
float: right;
}
View Demo jsFiddle
Remove position: relative property in .div2{...} and .div3 {...} class.
Change property value float: left to float: right in .div3{...} class to archive this.
.div2 {
width: 300px;
height: 200px;
background: #aaa;
right: 100px;
float: left;
position: relative; /* Remove this */
}
.div3 {
width: 100px;
height: 100px;
background: #777;
left: 300px;
float: left; /* Set float Right */
position: relative; /* Remove this */
}
Look this demo: http://jsfiddle.net/abruzzi/m8z37q0y/8/
You should remove the all css property below:
position: relative; left...
and set correct float property like below:
.div1 {
width: 100px;
height: 100px;
background: #eee;
float: right;
}
.div2 {
width: 300px;
height: 200px;
background: #aaa;
float: left;
}
.div3 {
width: 100px;
height: 100px;
background: #777;
float: right;
}
<div class="container">
<div class="div1">DIV1. This will be on the right</div>
<div class="div2">DIV2. This will be on the left</div>
<div class="div3">DIV3. This will be on the right</div>
</div>
.container {
width: 400px;
height: 250px;
background: #ccc;
}
.div1 {
width: 100px;
height: 100px;
background: #eee;
left: 300px;
float:right;
}
.div2 {
width: 300px;
height: 200px;
background: #aaa;
right: 100px;
float:left;
}
.div3 {
width: 100px;
height: 100px;
background: #777;
left: 300px;
float:right;
}
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;
}
I have an HTML table realized as a bunch of divs (for making a scrollable table).
In one of the cells (a div), I want to show a popup which overlaps other cells.
Like so:
http://jsfiddle.net/pFx6m/
My markup:
<div class="dataRow">
<div class="firstCell">lalala</div>
<div class="secondCell">lululu</div>
<div class="thirdCell">
<div id="someBigContent"></div>
<div class="clearRight"></div></div>
</div>
<div class="dataRow">
<div class="firstCell">lalala</div>
<div class="secondCell">lululu</div>
<div class="thirdCell">
</div>
</div>
<div class="dataRow">
<div class="firstCell">lalala</div>
<div class="secondCell">lululu</div>
<div class="thirdCell">lilili</div>
</div>
My CSS:
.dataRow {
height: 30px;
width:300px;
max-height: 30px;
}
.dataRow > div {
display: table-cell;
height: 30px;
z-index: 0;
overflow:hidden;
}
.firstCell {
width: 100px;
height: 10px;
background-color: blue;
}
.secondCell {
width: 100px;
height: 10px;
background-color: red;
}
.thirdCell {
width: 100px;
height: 10px;
background-color: yellow;
}
.clearRight {
clear: right;
}
#someBigContent {
height:100px;
width:250px;
background-color: #000;
position: relative;
top: 0px;
left: -50px;
float:right;
z-index: 999;
}
Now I'm doing something wrong, because it doesn't overlap the cells left of the someBigContent (cells one and two) and it makes some rows bigger than they're supposed to be.
See this fiddle for an overview of the situation.
How can I just make the cells overlap (and maybe the content that is under there — not just the table)?
With that CSS the block #someBigContent will not affect the rows or cells sizes:
.dataRow {
height: 30px;
width:300px;
max-height: 30px;
}
.dataRow > div {
display: relative;
float: left;
height: 30px;
z-index: 0;
}
.firstCell {
width: 100px;
height: 10px;
background-color: blue;
}
.secondCell {
width: 100px;
height: 10px;
background-color: red;
}
.thirdCell {
width: 100px;
height: 10px;
background-color: yellow;
}
.clearRight {
clear: right;
}
#someBigContent {
height:100px;
width:250px;
background-color: #000;
position: absolute;
top: 10px;
left: 10px;
z-index: 999;
}
Now you can adjust the position of this block relative to parent cell.
It is very strange to see an table made out of div's...
but try in CSS to add
max-width: 100px !important;
For the div/table thing that breaks out ?