I'm not a clever man, just trying to make a responsive page with a left sidebar, so far that's okay, but I cannot figure out how to align the content of the main div to the top.
This is the code: https://jsfiddle.net/kissja74/df8vkn2a/
#content {
position: relative;
max-width: 400px;
margin: 0 auto;
}
#menu {
position: relative;
width: 50px;
height: 30px;
margin-left: -50px;
background-color: blue;
}
<div id='content'>
<div id='menu'>menu</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi interdum porttitor accumsan. Aliquam at egestas lacus, sed ultrices dui.</p>
</div>
Add to your style
#menu {float: left}
Related
I have a div with some text and an image that should appear to the right of the text.
The problem is that the image is appearing on the right, but it is not beside the text. I have used float:right and clear option but it still doesn't work properly.
My code is:
.box {
width: 600px;
height: 1000px;
left: calc( 45% - 200px);
top: 20%;
position: absolute;
border-radius: 5px;
border: 2px solid rgba(255, 255, 255, 0.3);
padding: 0px;
text-align: center;
box-sizing: border-box;
display: flex;
}
.content {
border: 4px solid red;
width: 600px;
word-wrap: break-word;
}
.img {
margin-left: 15px;
float: right;
display: inline-block;
clear: both;
}
<div class="box">
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ultrices, urna ut eleifend blandit, orci nisi vehicula nisi, sit amet commodo nisl ligula ac nunc.</p>
<img src="http://placehold.it/150x250/000000/ffffff" class="img">
</div>
</div>
THIS is what I want to do.
Just put the floated element first:
<div class="box">
<div class="content">
<img src="http://placehold.it/150x250/000000/ffffff" class="img">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ultrices, urna ut eleifend blandit, orci nisi vehicula nisi, sit amet commodo nisl ligula ac nunc.</p>
</div>
</div>
It'll float off to the left and then your text will fill the space on the right.
By putting the text first, the image doesn't displayed until after the text element ends, so the image will be floated under the text. (Just like if you didn't float it, it would appear under the text).
Expand for a working snippet to see it in action:
.box {
width: 600px;
height: 1000px;
left: calc( 45% - 200px );
top:20%;
position: absolute;
border-radius: 5px;
border: 2px solid rgba(255, 255, 255, 0.3);
padding: 0px;
text-align: center;
box-sizing: border-box;
display: flex;
}
.content{
border: 4px solid red;
width: 600px;
word-wrap:break-word;
}
.img{
margin-left: 15px;
float: right;
display:inline-block;
clear:both;
}
<div class="box">
<div class="content">
<img src="http://placehold.it/150x250/000000/ffffff" class="img">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ultrices, urna ut eleifend blandit, orci nisi vehicula nisi, sit amet commodo nisl ligula ac nunc.</p>
</div>
</div>
To achieve the expected result, the <img> should go before <p> tag in your HTML. Here is an example:
.box {
width: 600px;
height: 1000px;
left: calc( 45% - 200px);
top: 20%;
position: absolute;
border-radius: 5px;
border: 2px solid rgba(255, 255, 255, 0.3);
padding: 0px;
text-align: center;
box-sizing: border-box;
display: flex;
}
.content {
border: 4px solid red;
width: 600px;
word-wrap: break-word;
}
.img {
margin-left: 15px;
float: right;
display: inline-block;
clear: both;
}
<div class="box">
<div class="content">
<img src="http://placehold.it/150x250/000000/ffffff" class="img">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ultrices, urna ut eleifend blandit, orci nisi vehicula nisi, sit amet commodo nisl ligula ac nunc.</p>
</div>
</div>
Either put the image before the p tag, or put it inside the p tag (see my snippet).
By the way: When you apply float to an element, inline-block will have no effect at all, and also the clearing does nothing in this particular case.
.box {
width: 600px;
height: 1000px;
left: calc( 45% - 200px);
top: 20%;
position: absolute;
border-radius: 5px;
border: 2px solid rgba(255, 255, 255, 0.3);
padding: 0px;
text-align: center;
box-sizing: border-box;
display: flex;
}
.content {
border: 4px solid red;
width: 600px;
text-align: left;
}
.img {
margin-left: 15px;
float: right;
}
<div class="box">
<div class="content">
<p><img src="http://placehold.it/150x250/000000/ffffff" class="img">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ultrices, urna ut eleifend blandit, orci nisi vehicula nisi, sit amet commodo nisl ligula ac nunc.</p>
</div>
</div>
Essentially I am trying to use the <Div> tag to create a bottom border to separate different content on the page but when I scroll to the bottom and insert the div there to separate them, it will ignore the other tags I have put and attached itself to the previous div separator.
How can I fix this? I tried using a HR tag but it did the same.
This is my code:
div {
margin: 0;
padding: 0;
}
#wrapper {
width: 100%;
margin: 0 auto;
}
#leftcolumn,
#rightcolumn {
border: none;
float: left;
min-height: 450px;
color: white;
}
#leftcolumn {
width: 50%;
}
.container {
margin-left: 10%;
width: 40%;
text-align: center;
}
#rightcolumn {
/* height: 100%;*/
width: 40%;
float: right;
background-color: #c9ccc9;
}
.border {
border-bottom: 40px solid #8dc43f;
}
p {
color: black;
}
.infotext {
color: #8dc43f;
margin-left: 30%;
font-family: 'ABeeZee', sans-serif;
font-size: 30px;
}
.infotexttitle {
color: #8dc43f;
margin-left: 25%;
font-family: 'ABeeZee', sans-serif;
font-size: 30px;
}
.infotexttitlepower {
color: #8dc43f;
margin-left: 36%;
font-family: 'ABeeZee', sans-serif;
font-size: 30px;
}
.infotexttitlecomm {
color: #8dc43f;
margin-left: 17%;
font-family: 'ABeeZee', sans-serif;
font-size: 30px;
}
.bluetags {
width: 264px;
padding: 0;
/* transform:rotate(180deg);*/
display: block;
/* border-collapse:collapse;*/
margin-left: 176px;
margin-top: 4px;
}
.greentags {
width: 264px;
padding: 0;
/* transform:rotate(180deg);*/
display: block;
/* border-collapse:collapse;*/
margin-left: 180px;
margin-top: -26px;
}
.orangetags {
width: 280px;
padding: 0;
/* transform:rotate(180deg);*/
display: block;
/* border-collapse:collapse;*/
margin-left: 175px;
margin-top: -15px;
}
.image {
position: relative;
width: 80%;
/* for IE 6 */
}
.titleimg {
margin-left: -60%;
margin-right: 10%;
}
imagetext {
position: absolute;
top: 200px;
left: 0;
width: 100%;
}
.bgimg {
background-size: cover;
width: 100%;
height: 60%;
border-collapse: collapse;
display: block;
margin: 0;
padding: 0;
}
#container {
height: 400px;
width: 400px;
position: relative;
}
#text {
z-index: 100;
position: absolute;
color: white;
font-size: 24px;
font-weight: bold;
left: 43%;
top: 25%;
font-family: 'ABeeZee', sans-serif;
}
#secondtext {
z-index: 100;
position: absolute;
color: white;
font-size: 24px;
font-weight: bold;
left: 37%;
top: 30%;
font-family: 'ABeeZee', sans-serif;
}
<div id="cssmenu">
<ul>
<img src="turtletag.png" class="titleimg">
<li><span>Home</span>
</li>
<li><span>Features</span>
</li>
<li><span>App</span>
</li>
<li><span>Products</span>
</li>
<li><span>Support</span>
</li>
</ul>
</div>
<img src="googlestore.png" style="position:absolute; top:210px;left:70px; width: 10%;">
<img src="appstore.png" style="position:absolute; top:320px; left:77px; width:10%;">
Order Tags
<img src="iPhone5_Mockup_Template_Free_by_Ray.png" class="bgimg">
<p id="text">Turtle Tags</p>
<p id="secondtext">Always connected to the nest</p>
<div class="border"></div>
<div id="leftcolumn">
<div class="mainbody">
<img src="bluetags.png" class="bluetags hvr-float">
</div>
<div class="mainbody">
<img src="greentags.png" class="greentags hvr-float">
</div>
<div class="mainbody">
<img src="orangetag.png" class="orangetags hvr-float">
</div>
</div>
<a name="features"></a>
<div id="rightcolumn">
<h2 class="infotext">Features</h2>
<hr class="newstyle">
<img src="battery.png" style="margin-left:40%; width:15%">
<p class="infotexttitle">Long battery life</p>
<p rows="4" columns="4" style="width:350px;margin-left:100px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur urna enim, aliquet non sagittis sit amet, euismod luctus risus. Aliquam venenatis arcu quam, id hendrerit dolor fermentum sed. Nullam congue molestie dolor quis egestas. Suspendisse
potenti.
</p>
<img src="speaker-xxl.png" style="margin-left:45%; width:10%; margin-top:30px;">
<p class="infotexttitle">Noise Notifications</p>
<p rows="4" columns="4" style="width:350px;margin-left:100px;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur urna enim, aliquet non sagittis sit amet, euismod luctus risus. Aliquam venenatis arcu quam, id hendrerit dolor fermentum sed. Nullam congue molestie dolor quis egestas. Suspendisse potenti.
</p>
<img src="powericon.png" style="margin-left:45%; width:10%; margin-top:30px;">
<p class="infotexttitlepower">Always on</p>
<p rows="4" columns="4" style="width:350px;margin-left:100px;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur urna enim, aliquet non sagittis sit amet, euismod luctus risus. Aliquam venenatis arcu quam, id hendrerit dolor fermentum sed. Nullam congue molestie dolor quis egestas. Suspendisse potenti.
</p>
<img src="twoway.png" style="margin-left:45%; width:10%; margin-top:30px;">
<p class="infotexttitlecomm">Two way communication</p>
<p rows="4" columns="4" style="width:350px; margin-left:100px;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur urna enim, aliquet non sagittis sit amet, euismod luctus risus. Aliquam venenatis arcu quam, id hendrerit dolor fermentum sed. Nullam congue molestie dolor quis egestas. Suspendisse potenti.
</p>
</div>
I've tried changing the css and I can't find anything that would cause it, But a fresh pair of eyes may be able to find something I cannot.
The problem here comes from how you constructed your page. You have a left/right column that was built using floats. when you use float, it takes the content in the float out of the general flow of the page. Try to remove those floats and it should work as expected.
I removed your floats in the fiddle and the border started working right.
https://jsfiddle.net/ahmadabdul3/ghogvcsx/4/
here's a basic idea on how floats work: the top boxes don't overlap because there is no float, but the bottom 2 boxes you only see green because the red one is floated so the green one takes its space. to avoid this, add an explicit height to the floated div, but then you can't have dynamically expanding content. https://jsfiddle.net/ahmadabdul3/bL8qLa6j/2/
and here's a basic idea of how columns work: https://jsfiddle.net/ahmadabdul3/bL8qLa6j/5/
I have a list of items which consist of an image and blockquote. I have been trying to set the images width to a set max-width. Then trying to make blockquote fit in automatically by the images side. Whilst keeping both elements vertically aligned center too.
I'M having some problems and would be thankful if someone could help. jsFiddle
html
<ul>
<li>
<div><img src="http://placehold.it/180x100"></div>
<blockquote><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas nec magna elit. Suspendisse nec enim lacus. Aenean semper ipsum in faucibus blandit. Duis auctor ornare viverra. – Person</p></blockquote>
</li>
<li>
<div><img src="http://placehold.it/146x16"></div>
<blockquote><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas nec magna elit. Suspendisse nec enim lacus. Aenean semper ipsum in faucibus blandit. Duis auctor ornare viverra. – Person</p></blockquote>
</li>
</ul>
CSS
ul {
list-style: none;
margin: 0;
padding: 0;
}
ul li {
width: 100%;
position: relative;
float: left;
padding: 0 0 30px;
}
ul li div {
width: 200px;
position: relative;
float: left;
height: 100%;
max-height: 100%;
display:table-cell;
vertical-align: middle;
}
ul li img {
display:table-cell;
vertical-align: middle;
}
ul li blockquote {
color: #999;
float: right;
font-style: italic;
margin: 0;
width: 70%;
}
ul li blockquote p {
margin: 10px 0;
}
I have removed float, so that it could be vertically aligned properly. Please check this http://jsfiddle.net/NLCnk/3/
If using flexbox is an option for you, take a look at http://jsfiddle.net/dcsturm/ypxud/
Updated the fiddle, because I had overread the width-aspect of your request.
And if you want to learn more about this awesome technic: http://philipwalton.github.io/solved-by-flexbox/
I'm having a problem with with positioning elements on top of each other.
Here is my markup:
<div id="glownySlajder">
<ul>
<li>
<img src="inc/img/slajder_bg.jpg" alt="Slajd" class="slajd">
<div class="fr">
<img src="inc/img/strzalka_lewo.png" alt="strzalka_lewo">
<p class="fl">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed laoreet consequat gravida. Nunc sed risus est, ac vestibulum nisl. Suspendisse sagittis velit a massa auctor accumsan. Aliquam hendrerit libero tellus, at molestie leo. Curabitur sodales </p>
<img src="inc/img/strzalka_prawo.png" alt="strzalka_prawo">
</div>
</li>
</ul>
</div>
Here is my css:
#glownySlajder {
margin-bottom: -2px;
}
#glownySlajder a {
margin: 7px;
}
#glownySlajder ul li img {
z-index: 9998;
}
#glownySlajder div {
z-index: 9999;
color: black;
background-color: #e7e7e7;
height: 85px;
width: 500px;
padding: 0px 5px;
}
#glownySlajder div p {
font-size: 11px;
line-height: 14px;
margin-top: 20px;
width: 390px;
}
.fr {
float: right;
}
.fl {
float: left;
}
This is what I get:
This is want I want to achieve:
The problem is that z-index doesn't seem to be working. When I try to do negative margin on a div with p, it just disappears under the image, not what I want exactly.
I am unable to work this out on my own, any tips please?
First of all, z-index only works on block elements (display:block). Second, it is only useful for elements which are in the same stacking context. Third, don't use margin to position. Use position: and top, left, right, bottom for this.
References:
CSS2.1: Stack level
CSS2.1: Positioning
As Illustrated in the next graphic I have a problem with my responsive code: I have 3 sections called square1, 2 and 3 with a white div inside. text on top of it and an icon with an absolute position. Everything fine from 920px to higher browsing. Now, from 720 to 940 pixels I'm trying to give this 3 elements a 50% of width, to display two on top and 1 at the bottom, but centered. so far is a mess. Could someone explain me what I'm doing wrong? my actual DEMO
HTML:
<div id="section2">
<div id="centralize2">
<div id="square1">
<div id="white1">
<img src="images/hexagon1.png" class="hexagon" />
<h2 class="title1">Ipsum Dolor Consectetur1</h2>
<h3 class="description2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla a dolor ac sapien semper maximus vel vel arcu. Praesent venenatis semper ornare. Donec blandit feugiat tellus. </h3>
</div>
</div>
<div id="square2">
<div id="white1">
<img src="images/hexagon2.png" class="hexagon" />
<h2 class="title1">Ipsum Dolor Consectetur2</h2>
<h3 class="description2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla a dolor ac sapien semper maximus vel vel arcu. Praesent venenatis semper ornare. Donec blandit feugiat tellus. </h3>
</div>
</div>
<div id="square3">
<div id="white1">
<img src="images/hexagon3.png" class="hexagon" />
<h2 class="title1">Ipsum Dolor Consectetur3</h2>
<h3 class="description2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla a dolor ac sapien semper maximus vel vel arcu. Praesent venenatis semper ornare. Donec blandit feugiat tellus. </h3>
</div>
</div>
</div>
</div>
Thanks!!
You can use flexbox to achieve what you want. Don't use absolute positioning if it's not necessary. If the width is bigger than 940px, the divs will display next to each other. Try it out in the full version of the code snippet.
Also cleaned up some code, as you can't have multiple divs with the same id. That's not valid markup. Use a class instead.
#section2 {
position: relative;
background-color: #112e4c;
overflow: hidden;
}
#square1, #square2, #square3 {
margin-top: 59px;
}
.white1 {
margin: 20px;
background-color: #fff;
text-align: center;
}
.hexagon {
position: absolute;
left: 50%;
}
.title1 {
font-size:18px;
margin-top: 90px;
font-family: 'Ubuntu', sans-serif;
color: #112e4c;
font-weight: 600;
}
.description2 {
font-size: 14px;
line-height: 16px;
margin-top:20px;
padding-left: 20px;
padding-right: 20px;
text-align: center;
color: #8da0b4;
}
#media all and (min-width:720px) {
#centralize2 {
display: flex;
flex-flow: row wrap;
}
#square1, #square2, #square3 {
flex-basis: calc(50%);
}
}
#media all and (min-width:940px) {
#square1, #square2, #square3 {
flex-basis: calc(100%/3);
}
}
<body>
<div id="section2">
<div id="centralize2">
<div id="square1">
<div class="white1">
<h2 class="title1">Ipsum Dolor Consectetur1</h2>
<h3 class="description2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla a dolor ac sapien semper maximus vel vel arcu. Praesent venenatis semper ornare. Donec blandit feugiat tellus. </h3>
</div>
</div>
<div id="square2">
<div class="white1">
<h2 class="title1">Ipsum Dolor Consectetur2</h2>
<h3 class="description2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla a dolor ac sapien semper maximus vel vel arcu. Praesent venenatis semper ornare. Donec blandit feugiat tellus. </h3>
</div>
</div>
<div id="square3">
<div class="white1">
<h2 class="title1">Ipsum Dolor Consectetur3</h2>
<h3 class="description2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla a dolor ac sapien semper maximus vel vel arcu. Praesent venenatis semper ornare. Donec blandit feugiat tellus. </h3>
</div>
</div>
</div>
</div>
</body>
It has to do with your absolute positioning. Try removing the absolute positioning, and try floating the blocks left and add your margins as needed. Will try and get a working demo together for you asap, at work atm.
Got a chance to try and edit your demo, I believe you're looking for something like this https://jsfiddle.net/ah5zz8qq/
#section2 {
width: 100%;
background-color: #112e4c;
overflow: hidden;
}
#centralize2 {
width: 880px;
height: 310px;
margin: 40px auto;
text-align: center;
}
#square1 {
display: block;
float: left;
width: 33.3%;
position: relative;
}
#square2 {
display: block;
float: left;
width: 33.3%;
position: relative;
}
#square3 {
display: block;
float: left;
width: 33.3%;
position: relative;
}
#white1 {
width: 280px;
height: 250px;
background-color: #fff;
text-align: center;
position: relative;
}
.hexagon {
position: absolute;
left: 50%;
top: 0;
margin-left: -52px;
margin-top: -59px;
}
.title1 {
display: block;
font-size:18px;
font-family: 'Ubuntu', sans-serif;
color: #112e4c;
font-weight: 600;
}
.description2 {
font-size: 14px;
line-height: 16px;
margin-top:20px;
padding-left: 20px;
padding-right: 20px;
text-align: center;
color: #8da0b4;
}
#media all and (max-width:940px) {
#centralize2 {
width: 90%;
}
#section2 {
height: 720px;
}
#square1 {
display: block;
width: 50%;
float: left;
}
#square2 {
display: block;
width: 50%;
float: left;
margin-bottom: 10px;
}
#square3 {
display: block;
clear: both;
width: 50%;
float: none;
margin: 0 auto;
}
#white1 {
width:300px;
}
}
#media all and (max-width:720px) {
#section2 {
height: 1070px;
}
#buttons {
margin-top:25px;
}
#square1 {
width: 100%;
}
#square2 {
width: 100%;
margin-top:340px;
}
#square3 {
width: 100%;
margin-top:340px;
}
#white1 {
width: 100%;
position: absolute;
}
}
}