I worked on the code i had posted here and fixed it so it does the things i wanted to but the third element in the row wraps to the next line when the browser is between 992px and 1350px. when the browser is between 992px and 1350px the third element in he row wraps to the next line, i have tried with display: inline-block, the left, rifght, center, floats, the flexbox and many other things but nothing seems to work with the media queries in the csss
CSS
* {
box-sizing: border-box;
margin: 0;
}
body {
font-family: Times, Verdana, sans-serif;
font-size:100%;
}
}
/**** Row (for the responsive design***/
.row {
padding: 15%;
margin-right: 5px;
margin-left: 5px;
}
/**** Header ****/
header {
font-size: 24px;
margin-bottom: 35px;
padding-top: 2.5%;
text-align: center;
}
/**** Article styles and position ****/
#art1, #art2, #art3 {
display: inline-block;
float: left;
height: 40%;
width: 31%;
}
#art1 {
margin: 10px 20px 10px 25px;
}
#art2 {
margin: 10px 10px 10px 10px;
}
#art3 {
margin: 10px 20px 10px 10px;
}
/**** Article titles ****/
#lorem1 {
background-color: lightgreen;
border: 1.5px solid black;
left: 70%;
margin-bottom: -28.9px;
padding-left: 15px;
padding-right: 15px;
position: relative;
text-align: center;
width: 30%;
}
#lorem2 {
background-color: turquoise;
border: 1.5px solid black;
left: 70%;
top: 20%;
position: relative;
width: 30%;
margin-bottom: -28.9px;
padding-right: 15px;
padding-left: 15px;
text-align: center;
}
#lorem3 {
background-color: crimson;
border: 1.5px solid black;
left: 70%;
margin-bottom: -28.9px;
padding-left: 15px;
padding-right: 15px;
position: relative;
text-align: center;
width: 30%;
}
/**** Content of the articles ****/
p {
border: 1px black solid;
overflow: hidden;
text-overflow: hidden;
}
.p1, .p2, .p3 {
background-color: mediumpurple;
color: gold;
padding: 35px 10px 10px 15px;
}
/**** Media queries ****/
/**Mobile devices**/
#media (max-width: 767px) {
* {
box-sizing: border-box;
margin: 0;
}
#art1, #art2, #art3 {
width: 94.5%;
display: block;
}
#art1, #art2, #art3 {
margin: 10px 20px 10px 20px;
}
}
/**Tablets**/
#media (min-width: 768px) and (max-width: 991px) {
*{
margin: 0; }
#art1, #art2 {
width: 45.5%;
display: inline-block;
}
#art3 {
display: inline-block;
width: 92%;
position: relative;
left: 2.5%;
}
#art1 {
margin: 10px 20px 10px 25px;
}
#art2 {
margin: 10px 10px 10px 10px;
}
#art3 {
margin: 10px 40px 10px 20px;
}
/**Desktop computers**/
#media (min-width: 992px) and (max-width: 1199px) {
* {
box-sizing: border-box;
margin: 0;
}
.row {
display: flex;
flex-wrap: nowrap;
justify-content: center;
align-items: flex-start;
flex-direction: row;
border: 2px solid red; /* not necesary just checkiing it'd appear on the screen*/
}
#art1, #art2, #art3 {
width: 31%;
height: 30%;
}
#art1 {
margin: 10px 20px 10px 25px;
}
#art2 {
margin: 10px 10px 10px 10px;
}
#art3 {
margin: 10px 20px 20px 10px;
fle
}
}
/**** Deskptops above 1360px ****/
#media (min-width: 1200px) and (max-width: 1350px) {
* {
box-sizing: border-box;
margin: 0;
}
.row {
display:flex;
flex-wrap: wrap;
justify-content: center ; /* for horizontal aligning of child divs */
align-items : center ; /* for vertical aligning */
}
#art1, #art2, #art3 {
width: 31%;
display: inline-block;
}
#art1 {
margin: 10px 20px 10px 25px;
}
#art2 {
margin: 10px 10px 10px 10px;
}
#art3 {
margin: 10px 20px 20px 10px;
}
}
html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="css/styles-2.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Week 2 assigment</title>
</head>
<body>
<section class="row">
<header>
<h1>Our Menu</h1>
</header>
<article id="art1" >
<h2 id="lorem1">Chiken</h2>
<p class="p1">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</article>
<article id="art2" >
<h2 id="lorem2">Beef</h2>
<p class="p2">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</article>
<article id="art3">
<h2 id="lorem3">Sushi</h2>
<p class="p3">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</article>
</section>
</body>
</html>
Your code is not following any general layout. I suggest checking out w3 and looking at float/clearfix or flexbox layouts so you can figure out stuff before posting too much.
here is a simple vanilla way too display three columns in a line. You can add your media queries to make the sections 100% on resize.
Your CSS is excessive and uses bootstrap classes without having it in your head. And your css plays with these classes. I am not sure what's going on here haha. Hope this helps bro!
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
.clearfix { display: inline-block; }
/* start commented backslash hack \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* close commented backslash hack */
section {
width:31.33%;
float:left;
margin-right:1%;
}
<body>
<header>
<h1>Our menu</h1>
</header>
<div class="clearfix">
<section class="1">
<h2 class="loremab1">lorem 1</h2>
<p class="p1">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</section>
<section class="2">
<h2 class="loremab2">lorem 2</h2>
<p class="p2">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</section>
<section class="3">
<h2 class="loremab3">lorem 3</h2>
<p class="p3">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</section>
</div>
</body>
Related
p.note:before {
content: "";
width: 30px;
height: 50px;
float: left;
margin: 0 6px 0 0;
background: url(../images/note-icon.png) no-repeat;
}
.note {
font-family: arial, sans-serif !important;
background-color: transparent !important;
border: 1px solid #6F1425 !important;
}
Hello,
I am trying to enforce the vertical height of a ::before pseudo-element (image of a notepad) before a body of text. Longer text wraps below the image however and I want to prevent this. Attempts to include an absolute height extends past/below the element into other content however.
Centering the image vertically before the text would be an acceptable alternative.
Reduce the viewing window of the below example (to force wrapping and additional lines of text) to see what I mean. Thank you
https://codepen.io/psuedobeforehelp/pen/YzGKVOB
You can do it like this. in before element you just need to put this code
position:absolute;
left:20px;
top:50%; // THIS LINE OF CODE HERE CENTERS THE IMAGE
transform:translateY(-50%); // THIS LINE OF CODE HERE CENTERS THE IMAGE
And add position:relative; to your note class to prevent the before element from going somewhere.
p.note:before {
content: "";
width: 30px;
height: 50px;
margin: 0 6px 0 0;
position: absolute;
background: red;
left: 10px;
top: 50%;
transform: translateY(-50%);
}
.note {
font-family: arial, sans-serif !important;
background-color: transparent !important;
border: 1px solid #6F1425 !important;
position:relative;
padding:20px 20px 20px 50px;
}
<p class="note"><span class="bold">Note</span>: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
Text
Hi there,
first I have to say: I´m a beginner, so I hope you are patient with me!:-)
I created a navigation via a list. By adding a "padding" for "a" I determined also the height of its ancestor elements ("ul" and "nav"). I did that because afterwards I wanted the whole areas to get black with a transition.
Now, when I want to scale it to 1.2, the "a"-clicking-area appears bigger than the ancestor arease of "ul" and "nav".
Any ideas how I can limit it to the height of the link area?
image
Link to picture of Problem
CSS and html code
<!-- language: lang-css -->
* {
margin: 0;
box-sizing: border-box;
}
html {
font-size: 100%;
padding: 0;
font-family: helvetica;
}
body {
color: #000;
font-size: 1em;
text-align: left;
padding: 0;
background-color: #fff;
}
article, aside, details, figcaption, figure, footer, header, main, nav, section, summary {
display: block;
}
strong, b {
font-weight: bold;
}
em, i {
font-style: *italic*;
}
small {
font-size: 0.8rem;
}
main h1,
main p {
margin-bottom: 1rem;
}
main h1 {
font-size: 2em;
font-weight: **bold**;
}
main p {
line-height: 1.5em;
}
main :last-child {
margin-bottom: 0;
}
nav ul {
list-style-type: none;
padding: 0;
}
header {
height: 30rem;
background-image: url(../images/whatsapp.jpg);
background-repeat: no-repeat;
background-size: cover;
background-position: right bottom;
position: relative;
}
header a {
color: white;
}
/*Breakpoint 1*/
#media (max-width: 1024px) {
header {
height: 20rem;
}
}
header #title {
font-size: 7.5rem;
font-weight: **bold**;
white-space: nowrap;
text-decoration: none;
word-spacing: -0.05em;
position: absolute;
top: 0.5rem;
left: calc(50% - 30rem);
opacity: 0.75;
}
/*Breakpoint 1*/
#media (max-width: 1024px) {
header #title {
font-size: 5rem;
font-weight: **bold**;
white-space: nowrap;
text-decoration: none;
word-spacing: -0.05em;
position: absolute;
top: 0.5rem;
left: calc(60% - 30rem);
opacity: 0.75;
}
}
header #title::before {
content: url(../images/sun.svg);
display: inline-block;
vertical-align: middle;
width: 30%;
font-size: inherit;
margin-top: 1rem;
margin-right: 2rem;
margin-left: 1rem;
}
/*Breakpoint 2*/
#media (max-width: 768px) {
header #title, header #title::before {
transform: rotate(-90deg);
top: calc(30rem - 100%);
left: -6rem;
}
header #title {
font-size: 2.8rem;
}
header #title::before {
width: 20%;
margin-right: 0rem;
margin-left: 2.5rem;
margin-bottom: 1rem;
}
}
nav {
width: 100%;
background-color:rgba(255, 255, 255, 0.3);
position: absolute;
top: 321px;
}
nav ul {
max-width: 1025px;
display: flex;
justify-content: space-around;
margin: auto;
}
nav ul li {
font-size: 1.4rem;
font-weight: **bold**;
white-space: nowrap;
}
nav ul li a {
padding: 4rem 2rem;
text-decoration: none;
display: block;
text-align: center;
}
nav ul li a:hover {
background-color: rgba(0, 0, 0, 0.3);
transform: scale(1.2);
transition: background-color 0.3s ease-in;
transition: transform 0.1s ease-in;
padding: 4rem 2rem;
}
#media (max-width: 1024px) {
nav {
box-sizing: border-box;
width: 180px;
height: inherit;
position: unset;
top: 0;
right: 0;
}
nav ul {
width: 100%;
flex-direction: column;
}
nav ul li a {
padding: 1.03rem;
text-align: left;
}
}
main {
max-width: 1025px;
box-sizing: border-box;
margin: auto;
padding: 2rem;
}
p {
text-align: justify;
-webkit-hyphens: auto;
-moz-hyphens: auto;
hyphens: auto;
}
```
html code
```
<!-- language: lang-html -->
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Whatsapp</title>
<link href="styles/styles_neu.css" rel="stylesheet" media="screen" />
</head>
<body>
<header>
Whatsapp
<nav>
<ul>
<li>
1
</li>
<li>
2
</li>
<li>
3
</li>
<li>
4
</li>
<li>
5
</li>
</ul>
</nav>
</header>
<main>
<h1>Heading</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</main>
</body>
</html>
<!-- end snippet -->
This question already has answers here:
Make a CSS triangle with transparent background on a div with white bg image?
(5 answers)
Transparent arrow/triangle indented over an image
(4 answers)
How do CSS triangles work?
(23 answers)
Closed 5 years ago.
GitHub uses two pseudoelements to show the green border around the triangle.
Like this:
Can I get the same result with only using one ::after selector?
You can try this
div {
width:300px;
height:100px;
background:#fff;
border:1px solid green;
position:relative;
padding:20px;
}
div:after {
content:"";
position:absolute;
right:-11px;
top:30px;
width:20px;
height:20px;
background:#fff;
border:1px solid green;
border-left:none;
border-bottom:none;
transform:rotate(45deg);
-webkit-transform:rotate(45deg);
user-select:none;
-webkit-user-select: none;
}
<div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
veniam,quis nostrud exercitation
</div>
You can used :after & :before selector for that
div {
width: 300px;
height: 200px;
background: #fff;
border: 1px solid #1db73f;
position: relative;
padding: 20px;
border-radius:5px;
}
div:before {
content: "";
position: absolute;
right: -20px;
top: 30px;
width: 0;
height: 0;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
border-left: 20px solid #fff;
z-index:1;
}
div:after {
content: "";
position: absolute;
right: -21px;
top: 30px;
width: 0;
height: 0;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
border-left: 20px solid #1db73f;
}
<div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
I want a list of items that have a cross icon in the middle on the right hand side. To do this I used an anchor with some padding, floated right, and relatively positioned. The icon is a known width and height.
The items also have some text that should also be centered vertically. The additional problem is that this text has an arbitrary length and I do not want any overflow or wrapping. The text must not overlap the icon and must be allowed to go up to its edge.
The final piece of the puzzle is that the width of each item must grow to the size of its parent. The height should remain fixed.
Here is an example (https://jsfiddle.net/bj6806u6/3/)
div {
background-color: red;
padding-right: 50px;
display: inline-block;
width: 80%;
vertical-align: middle;
height: 50px;
}
p {
background-color: yellow;
height: 20px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
display: inline-block;
max-width: 100%;
}
a {
background-color: green;
float: right;
position: relative;
padding: 10px;
top: 6px;
right: -44px;
}
<div><p>This is a short paragraph.</p><a>X</a></div>
<br /><br />
<div><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p><a>X</a></div>
Removing the -44px; and it is a bit more obvious what the problem is although I still have no idea how to solve it. Surely this must be possible, it seems like such a trivial problem.
So my question: How to keep the cross from moving down? I want it to always look like the first div.
You could do it with positioning instead of floating. The outer div gets relative positioning and then the x gets absolute positioning. It's positioned down from the top 50% of the height of the container and then negative margined back up half of the height of the x to place it in the middle.
div {
background-color: red;
padding-right: 50px;
display: inline-block;
height: 50px;
position: relative;
max-width: 100%;
box-sizing: border-box;
}
p {
background-color: yellow;
height: 20px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 100%;
}
a {
background-color: green;
position: absolute;
padding: 10px;
top: 50%;
right: 4px;
margin-top: -19px;
}
<div><p>This is a short paragraph.</p><a>X</a></div>
<br /><br />
<div><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p><a>X</a></div>
Does this help?
div {
background-color: red;
padding-right: 50px;
display: inline-block;
width: 80%;
vertical-align: middle;
height: 50px;
position: relative;
}
p {
background-color: yellow;
height: 20px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
display: inline-block;
max-width: 100%;
}
a {
background-color: green;
float: right;
position: absolute;
padding: 10px;
top: 6px;
right: 10px;
}
I positioned the div relative and then made the icon an absolute float from the right of that. Now sure if this is what you mean...
https://jsfiddle.net/bj6806u6/7/
Look at the code, you don't need to set padding-right on div and right on a (1 & 3), set max-width of p to full width subtract 50px (2) to take space for the cross.
div {
background-color: red;
/* padding-right: 50px; */ /* 1 */
display: inline-block;
width: 80%;
vertical-align: middle;
height: 50px;
}
p {
background-color: yellow;
height: 20px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
display: inline-block;
max-width: calc(100% - 50px); /* 2 */
}
a {
background-color: green;
float: right;
position: relative;
padding: 10px;
top: 6px;
/* right: -44px; */ /* 3 */
}
<div>
<p>
This is a short paragraph.
</p>
<a>X</a>
</div>
<br />
<br />
<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<a>X</a>
</div>
Nothing much need to change add div position relative, change a tag position absolute and right -44px to 5px. Live FIddle
div {
background-color: red;
padding-right: 50px;
display: inline-block;
width: 80%;
vertical-align: middle;
height: 50px;
position: relative; /*add position relative */
}
p {
background-color: yellow;
height: 20px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
display: inline-block;
max-width: 100%;
}
a {
background-color: green;
float: right;
position: absolute; /*Change relatie to absolute */
padding: 10px;
top: 6px;
right: 5px;/*Change -44 to 5px*/
}
<div>
<p>
This is a short paragraph.
</p>
<a>X</a>
</div>
<br />
<br />
<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<a>X</a>
</div>
I have keep the width fixed and expanded the text on hover.Is this the solution your looking for?
div {
background-color: red;
padding-right: 50px;
display: inline-block;
width: 80%;
vertical-align: middle;
height:auto;
}
p {
background-color: yellow;
height: 20px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
display: inline-block;
max-width: 100%;
}
.wrapR
{
max-width:80%;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
.wrapR:hover {
background-color: yellow;
overflow: visible;
}
a {
background-color: green;
float: right;
position: relative;
padding: 10px;
top: 6px;
right: -44px;
}
If the width of "X" is known or fixed, then you can limit the maximum width of adjacent text to make sure "X" is not moved or overlapped.
div {
background-color: red;
padding-right: 50px;
display: inline-block;
width: 80%;
vertical-align: middle;
height: 50px;
}
p {
background-color: yellow;
height: 20px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
display: inline-block;
max-width: calc(100% - 30px);
}
a {
background-color: green;
float: right;
position: relative;
padding: 10px;
top: 6px;
right: -44px;
width:10px;
}
Here is what my final layout should look like:
Unfotunately I am having trouble getting the two columns to layout properly with my css coding. When I use the float: left; coding it stacks them on top of each other.
/*------ Document -----*/
body {
margin: 0 auto;
padding: 0;
font: .75em/1.5em Helvetica, Arial, sans-serif;
color: #797267;
width: 960px;
background: #797267;
}
/**--- Headers ---*/
header {
width: 960px;
height: 210px;
background-image: url(../images/header-bg.jpg);
}
h1 {
width: 317px;
height: 71px;
padding: 64px 0px 0px 64px;
margin: 64px 64px 0px 0px;
}
h2 {
color: #423b2e;
size: 1.5em;
}
/*--- Navigation ---*/
nav {
color: #423b2e;
}
#current {
color: #bf3102;
}
ul {
list-style-type: none;
padding: 84px 64px 0px 0px;
float: right;
clear: left;
width: 277px;
}
li {
display: inline;
}
/*--- Banner --*/
div {
background-image: url(../images/main-content-bg.jpg);
width: 960px;
}
div #banner {
background-image: url(../images/banner.jpg);
width: 890px;
height: 200px;
margin: auto;
background-repeat: none;
}
/*--- Two-Columns Content --*/
#column1of2 {
width: 450px;
padding: 25px;
}
#column1of2.page-flip {
background-image: url(../images/page-flip.gif);
background-repeat: no-repeat;
background-position: left bottom;
width: 450px;
margin: 0px 0px 45px 64px;
}
#column2of2 {
width: 260px;
padding: 25px;
}
#column2of2.page-flip {
background-image: url(../images/page-flip.gif);
background-repeat: no-repeat;
background-position: left bottom;
width: 260px;
margin: 0px 0px 45px 44px;
}
/*--- Footer --*/
footer {
background-image: url(../images/footer-bg.jpg);
background-repeat: no-repeat;
color: #423b2e;
size: .9em;
text-align: center;
width: 960px;
padding: 92px 0px 0px 0px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>BusinessName</title>
<link rel="stylesheet" href="css/main.css" />
</head>
<body>
<header>
<h1>BusinessName</h1>
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Contact</li>
</ul>
</nav>
</header>
<div id="main-content">
<div id="banner">
</div>
<section id="column1of2" class="page-flip">
<h2>Who We Are (h2)</h2>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Aenean pretium tellus sit amet enim. Donec laoreet urna ut pede. Nulla eget magna at felis feugiat imperdiet.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</section>
<section id="column2of2" class="page-flip">
<h2>How We Can Help (h2)</h2>
<p><img width="70" height="70" alt="placeholder image" src="images/sample-thumb1.jpg" /> Sunc auctor, est a scelerisque vehicula, tortor nulla imperdiet elit, eu tincidunt ligula. </p>
<p><img width="70" height="70" alt="placeholder image" src="images/sample-thumb2.jpg" /> Sunc auctor, est a scelerisque vehicula, tortor nulla imperdiet elit, eu tincidunt ligula. </p>
<p><img width="70" height="70" alt="placeholder image" src="images/sample-thumb3.jpg" /> Sunc auctor, est a scelerisque vehicula, tortor nulla imperdiet elit, eu tincidunt ligula. </p>
</section>
</div>
<footer>
<p>© BusinessName. All rights reserved. </p>
</footer>
</body>
</html>
I think you made a mistake. float: left; is not applied to either of the columns.
Without looking at your code, did you try to use Display:inline?
I think you want this.I don't have your images.so i set the beckground-color for demo.
body {
margin: 0 auto;
padding: 0;
font: .75em/1.5em Helvetica, Arial, sans-serif;
color: #797267;
width: 960px;
background: #797267;
}
/**--- Headers ---*/
header {
width: 960px;
height: 210px;
background-image: url(../images/header-bg.jpg);
background-color:red;
}
h1 {
width: 317px;
height: 71px;
padding: 64px 0px 0px 64px;
margin: 64px 64px 0px 0px;
}
h2 {
color: #423b2e;
size: 1.5em;
}
/*--- Navigation ---*/
nav {
color: #423b2e;
}
#current {
color: #bf3102;
}
ul {
list-style-type: none;
padding: 84px 64px 0px 0px;
float: right;
clear: left;
width: 277px;
}
li {
display: inline;
}
/*--- Banner --*/
div {
background-image: url(../images/main-content-bg.jpg);
width: 960px;
background-color:black;
}
div #banner {
background-image: url(../images/banner.jpg);
width: 890px;
height: 200px;
margin: auto;
background-repeat: none;
background-color:green;
}
/*--- Two-Columns Content --*/
#column1of2 {
width: 450px;
padding: 25px;
float:left;
background-color:yellow;
}
#column1of2.page-flip {
background-image: url(../images/page-flip.gif);
background-repeat: no-repeat;
background-position: left bottom;
width: 450px;
margin: 0px 0px 45px 64px;
}
#column2of2 {
width: 260px;
padding: 25px;
background-color:blue;
float:left;
}
#column2of2.page-flip {
background-image: url(../images/page-flip.gif);
background-repeat: no-repeat;
background-position: left bottom;
width: 260px;
margin: 0px 0px 45px 44px;
}
/*--- Footer --*/
footer {
background-image: url(../images/footer-bg.jpg);
background-repeat: no-repeat;
color: #423b2e;
size: .9em;
text-align: center;
width: 960px;
padding: 92px 0px 0px 0px;
background-color:green;
clear:both;
}
<header>
<h1>BusinessName</h1>
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Contact</li>
</ul>
</nav>
</header>
<div id="main-content">
<div id="banner">
</div>
<section id="column1of2" class="page-flip">
<h2>Who We Are (h2)</h2>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Aenean pretium tellus sit amet enim. Donec laoreet urna ut pede. Nulla eget magna at felis feugiat imperdiet.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</section>
<section id="column2of2" class="page-flip">
<h2>How We Can Help (h2)</h2>
<p><img width="70" height="70" alt="placeholder image" src="images/sample-thumb1.jpg" /> Sunc auctor, est a scelerisque vehicula, tortor nulla imperdiet elit, eu tincidunt ligula. </p>
<p><img width="70" height="70" alt="placeholder image" src="images/sample-thumb2.jpg" /> Sunc auctor, est a scelerisque vehicula, tortor nulla imperdiet elit, eu tincidunt ligula. </p>
<p><img width="70" height="70" alt="placeholder image" src="images/sample-thumb3.jpg" /> Sunc auctor, est a scelerisque vehicula, tortor nulla imperdiet elit, eu tincidunt ligula. </p>
</section>
</div>
<footer>
<p>© BusinessName. All rights reserved. </p>
</footer>