Here is how it works:
how it works now
(the first paragraph is centered relative to small box)
And here is how I want it to be:
how I want it to be
(the second paragraph is no-wrap)
No idea what you are trying to actually do but the coding below will produce your second image:
.container {
display: inline-block;
padding: 10px;
text-align: center;
position: relative;
}
.box {
width: 221px;
padding: 10px;
border: 2px solid black;
height: calc(100% - 16px);
position: absolute;
top: 0px;
left: 0px;
}
.para2 {
white-space: nowrap;
}
<div class="container">
<div class="box"></div>
<p class="para1">
centered text
</p>
<p class="para2">
second paragraph with no-wrap blah blah blah blah ...
</p>
</div>
If this is not what you need then you MUST provide real substance and definitive information in your question.
Related
Please refer screenshot below taken from demo app.
box over box image
I need to create a colorful small square box appearing on left corner but as if over the big parent square box(including the contents inside of the white/parent box).
request you to please let me know if you have any suggestions
the application will be an Angular-8 with Prime icons used widely.
thanks
Update: component structure looks is as follow, see attachment:
component structure
You can do it using the :after pseudo-class. See the snippet for a demo.
body {
background: lightgrey;
}
.element {
width: 150px;
height: 150px;
background: white;
position: relative;
margin: 20px;
padding: 5px;
}
.element:after {
content: " ";
background: #00ee00;
width: 20px;
height: 20px;
border-radius: 3px;
left: 0;
top: -10px;
position: absolute;
}
<html>
<body>
<div class="element">
<h4>Title</h4>
<p class="text">Text text text</p>
<p class="text">Text text text</p>
</div>
</body>
</html>
i'm using a wordpress template called "Lay Theme" and i want the information-text to be fixed on the left of my site. I fixed it using position:fixed, but when i scroll down and the text is slightly longer than other, it overlays the footer.
I want the text to move up when te footer appears, how do i fix this?
I gave the text-div the class "uitleg" (dutch for information)
Here is the example: https://www.zwtsr.nl/housenation-x-ade/
.uitleg position: fixed; top: 45%; }
Try to use "position: sticky;"
.container {
width: 1400px;
margin-left: auto;
margin-right: auto;
}
.content {
height: 2000px;
}
.content .text {
width: 50%;
position: sticky;
top: 50%;
}
footer {
width: 100%;
height: 1080px;
color: #fff;
box-sizing: border-box;
padding: 40px;
background: #212121;
}
<div class="container">
<div class="content">
<div class="text">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</div>
</div>
</div>
<footer>
footer
</footer>
I am trying to solve this layout puzzle but am stuck in how to get it as elegant, clean and timeless.
Given:
- a horizontal line of 1 pixel height stretching inside the container its in
- a vertically as well as horitontally centered box over this line
- a left aligned textbox
- and a right aligned text box
What I have tried, is painstackingly increment the percengates untill I reached some kind of a middle... warning, disclaimer, the following code is very graphical and ugly!
CSS
author{color: grey}
box{float: left;
background: blue;
margin: 0 0 0 46.4%;
...
/* bad coding feel embarrassed showing this */
}
time{color: grey}
HTML (flexible and please change if needed)
<author></author>
<box><img src=""/></box>
<time></time>
I first thought this might be solved in flexbox, using justify-content: space-between however, I cannot figure out how to make the line appear there. So I am open for any suggestions wether its the good old positioning/float or with flexbox. Maybe it would be nice to try to solve it both ways and see which one is the most elegant? Thanks in advance!
Here is one way to accomplish that, where you use justify-content: space-between to align the author/box/date and an absolute positioned pseudo element to draw the line
#wrapper {
position: relative;
display: flex;
justify-content: space-between;
}
#wrapper::before {
content: '';
position: absolute;
left: 0; right: 0;
top: 50%; height: 1px;
background: gray;
}
#wrapper > * {
position: relative; /* instead of 'z-index: -1' on the pseudo so
the line stays below the items */
}
#author {}
#date {}
#box {
width: 50px;
height: 50px;
background: blue;
}
<div id="wrapper">
<div id="author">
Author
</div>
<div id="box">
</div>
<div id="date">
Date
</div>
</div>
Updated based on a comment
The #wrapper > * rule can in this case be replaced with setting position: relative on the box, which I recommend in favor of giving it a z-index.
Updated based on a 2nd comment
As you have issues with the combo Flexbox/script, here is one version without, with the same markup and an almost as short CSS
#wrapper {
position: relative;
}
#wrapper::before {
content: '';
position: absolute;
left: 0; right: 0;
top: 50%; height: 1px;
background: gray;
}
#author {
position: absolute;
top: 0;
left: 0;
}
#date {
position: absolute;
top: 0;
right: 0;
}
#box {
position: relative;
margin: 0 auto;
width: 50px;
height: 50px;
background: blue;
}
<div id="wrapper">
<div id="author">
Author
</div>
<div id="box">
</div>
<div id="date">
Date
</div>
</div>
I think the below snippet provides a framework to do what you want to do. This uses flex boxes to hold three columns of divs (the left, the right, and the square). By setting the width of the square, the other two elements in the flex will fill the space. Left and right align settings are set in paragraph elements within divs.
This is by no means a very tidy solution, but does show how it can be done.
.column {
display: block;
width: 150px;
}
.square {
display: inline;
width: 30px;
height: 30px;
margin: auto 0;
background: blue;
}
.top {
display: block;
height: 50%;
border-bottom: solid black 2px;
}
.bottom {
display: block;
height: 50%;
}
.banner {
display: flex;
padding: 5px;
}
p {
margin: 0;
line-height: 15px;
font-size: 0.8em;
}
.left-text {
text-align: left;
}
.right-text {
text-align: right;
}
<div class="banner">
<div class="column left">
<div class="top left">
<p class="left-text">
Author
</p>
</div>
<div class="bottom left">
</div>
</div>
<div class="square">
</div>
<div class="column right">
<div class="top right">
<p class="right-text">
Month Year
</p>
</div>
<div class="bottom right">
</div>
</div>
</div>
Try something like this. Fiddle
#line{background: #000; height:1px; margin-top:40px;}
.alignleft {
float: left;
text-align:left;
width:33.33333%;
}
.aligncenter {
float: left;
text-align:center;
width:33.33333%;
}
.alignright {
float: left;
text-align:right;
width:33.33333%;
}
.box{background:blue;margin:auto;width:40px;height:40px;display:block;margin-top:-20px;}
<div id="line">
<p class="alignleft">Author</p>
<div class="aligncenter"><div class="box">
</div></div>
<p class="alignright">month/year</p>
</div>
<div style="clear: both;"></div>
this is a tricky one...
Say if I have the following: (see diagram).
If the content + 'content footer' does not exceed the scrollheight I need the 'content footer' to be positioned at the bottom of the page. (See image, example A)
If the content + 'content footer' exceeds the scrollheight, Then as the content increases, I want to have the 'content footer' flow after the main content just as if it were another block element, but be the full width of the page. (See image example B)
It could be made with flex
http://codepen.io/HerrSerker/pen/GpaxNJ
#content-wrapper {
display: flex;
flex-direction: column;
justify-content: space-between;
position: absolute;
top: 0;
left: 0;right: 0;
bottom: 0;
height: 100%;
width: 100%;
overflow-y: visible;
}
#content {
width: 400px;
margin: 0 auto;
background-color: silver;
padding: 20px;
}
#actual-footer {
position: fixed;
bottom: 0;
left: 0;right: 0;
height: 20px;
background-color: gold;
text-align: center;
padding: 5px;
}
#content-footer {
margin-bottom: 30px;
background-color: blue;
color:white;
text-align: center;
padding: 5px;
padding-top: 50px;
}
body {
padding: 0;
margin: 0;
overflow-y: scroll;
}
body,html {
height: 100%;
}
<div id="content-wrapper">
<div id="content">
<h1>Content</h1>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
</div>
<div id="content-footer">Content Footer</div>
</div>
<div id="actual-footer">Actual Footer</div>
edit
If flex is no good, you should try using display table, table-row and table-cell
I've got a breakout CSS here: http://codepen.io/HerrSerker/pen/PqjBrg
It works by wrapping the content-footer with two divs
<div class="breakout"><div class="breakout_back"> with the style
.breakout {
position: relative;
left: 50%;
width: 100vw;
text-align: center;
}
.breakout .breakout_back {
position: relative;
left: -50%;
}
This is only compatible with browsers which support 100vw (view width) units:
http://caniuse.com/#feat=viewport-units
A different strategy would be: Every content has 100% width by default. And every content should deal with it's width for itself
I'm working on a blog layout, where some info (blue box) is taken out from the post's body like this:
http://jsfiddle.net/rhr96/
What is the best of doing that?
Currently I'm doing:
position: absolute;
margin-left: negative value;
to flow the blue box to the left.
But I could also do:
position: relative;
float: left;
right: some px;
Any of these considered better? Or are there any other method?
Short Answer: POSITION ABSOLUTE
Reason: Designers use position: absolute because that is the right way to take out the element from the normal document flow, using float: left; wont take out the blue box out of the document flow...
Edit: Just understood what you actually wanted, here I've made a new 1, you can check it out..
Demo
HTML
<div class="container">
<div class="block">1</div>
<div class="content">This is a question</div>
</div>
CSS
.container {
height: 200px;
width: 500px;
border: 1px solid #eeeeee;
margin: 30px;
position: relative;
font-family: Arial;
}
.block {
position: absolute;
height: 80px;
width: 60px;
background-color: #eeeeee;
top: 10px;
left: 10px;
font-size: 36px;
text-align: center;
}
.content {
width: 410px;
float: right;
margin: 10px;
font-size: 18px;
}
I think the best way of doing this, may actually be this (well, I say best, I guess that's a matter of opinion in most cases)
HTML:
<div class="container">
<div class="outside">
hi
</div>
<div class="inside">
<p>Blah blah blah</p>
</div>
</div>
CSS:
.container { margin: 20px auto; width: 400px; }
.outside { background: #d8d8d8; float: left; margin: 0 5px 0 0; padding: 5px; }
.inside { background: #000; color: #fff; margin: 5px 0; overflow: hidden; }
Obviously you can repeat this multiple times on the same page (as I imagine you may if this is for blog posts)
EDIT: My answer uses floats to take the element out of the normal flow, the use of overflow: hidden on the content means that it doesn't wrap underneath the floated element.
(If you don't know much about overflow I'd suggest reading about it, it can be useful for all sorts of things, e.g. float clearing)