This is what I want to do with BS3:
My beautiful schema :)
And this is my start code:
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="well well-sm">
<i class="glyphicon glyphicon-th-large pull-left"></i>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque molestias nihil quia!</p>
</div>
</div>
</div>
</div>
JsFiddle URL - http://jsfiddle.net/AJAhR/54/
I tried with line-height but it must be responsive so it doesn't work.
Someone can explain me how to do that with CSS/Boostrap3.
Try something with position absolute
.well.well-sm p { margin-left: 60px; /* with of the icons + icon's padding right */ }
.well.well-sm { position: relative; }
.well.well-sm i { position: absolute; top: 50%; left: 0; margin-top: -50px; /* 50% of the icon's height */ }
Live: http://jsfiddle.net/AJAhR/55/
Related
How to make lines around the circle which holds text for each line. I don't want text to be in the pseudo class. Below is the required output Image
.
Below code is which I have tried from Paulie_D previous solutions
.outCircle {
width: 20px;
height: 20px;
background-color: lightblue;
position: relative;
border-radius: 50%;
margin: 100px auto;
}
.marker {
width: 50px;
height: 2px;
position: absolute;
top: 50%;
left: 50%;
background: linear-gradient(to right, black, black 25%, transparent 25%, transparent 75%, black 75%);
transform: translate(-50%, -50%);
}
.vert {
width: 2px;
height: 50px;
background: linear-gradient(to bottom, black, black 25%, transparent 25%, transparent 75%, red 75%);
transform: translate(-50%, -50%);
}
.angle-1 {
transform: translate(-50%, -50%) rotate(45deg);
}
.angle-2 {
transform: translate(-50%, -50%) rotate(-45deg);
}
.inner {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
<div class="outCircle">
<div class="inner">
<div class="marker horiz"></div>
<div class="marker vert"></div>
<div class="marker angle-1"></div>
<div class="marker angle-2"></div>
</div>
</div>
Unfortunately your question is not entirely clear, but my guess is that you want to create some info-graphic about seeds with text around a nice graphic.
Instead of focusing on showing you how to create bordered circles with CSS and place text around them, I removed the text from your original image and cropped it. Because, as I suggested in my comment to visit my answer on SO62815794, it made more sense to me to take that code and the cropped image and show you how to create a responsive info-graphic with Flexbox Layout and a media query.
If this is not what you meant, please modify your answer and be more specific about what you need. However, while it is fun to create a graphic with CSS, in terms of maintenance you would be much better off with a cropped image or SVG file (more graphical elements for creating custom shapes).
The Snippet
has two demos showing how to use Flexbox Layout combined with Custom Attributes to create responsively sizing 2D XxY grids with the cropped image in the center.
demo 1 is a fairly straightforward 3x3 flexbox grid with equally sized cells
demo 2 is more complicated and has a main 3x1 grid with nested 1x2, 1x3 and 1x2 child grids giving it a more 'circular feel' than demo 1
The snippet is heavily commented and should be self explanatory, but additionally:
I left your original .outCircle in the HTML, just disabled it.
the cropped image is 138x138px PNG file (11.4Kb), with a transparent background (alpha channel) so you can play with the info-graphic background-color (: White for now)
The #media considers anything smaller than 720px (W/H) to be a 'smartphone' and will neither show the image (or .outCircle) nor any grid layout.
All you need to do is some fine-tuning with spacing, colors and font-sizes.
Make sure to go 'Full page' on SO and resize the browser window.
/*************************************/
/* main page structure, MOBILE first */
/*************************************/
body { height: 100vh; background-color: White }
.main-structure {
display: flex; flex-flow: column wrap;
/* Center everything inside the element (vertical and horizontal) */
justify-content: center; align-content: center; align-items: center
/* add your specific mobile settings */
}
.main-structure .outCircle { display: none } /* don't show on mobile */
.main-structure img { display: none } /* ditto */
.main-structure ul { padding-right: 40px } /* [OPTIONAL] to make L/R padding equal */
/*************/
/* EYE-CANDY */
/*************/
[band*="header"] {
background-color: rgba(254,190,0,1); /* egg yolk-ish */
text-align: center
}
.main-structure .headline {
width: 100%; /* stretch to fill parent */
padding: .25em 1em; /* some inner spacing */
color: CornflowerBlue;
font-size: 1.25em; font-weight: bold;
}
.outCircle {
position: relative; /* creates a new 'stacking context' for child elements */
/* Center everything inside the element (vertical and horizontal) */
justify-content: center; align-content: center; align-items: center;
}
.inner {
position: absolute;
width : 1.25rem;
height: 1.25rem;
border-radius: 50%;
background-color: lightblue;
}
.marker {
position: absolute; /* direct positioning inside parent 'stacking context' */
width: 3rem; height: 0.125rem;
/* center element in parent */
top: 50%; left: 50%;
transform: translate(-50%, -50%);
background: linear-gradient(to right, black, black 25%, transparent 25%, transparent 75%, black 75%);
}
.vert {
width: 0.125rem; height: 3rem;
transform: translate(-50%, -50%);
background: linear-gradient(to bottom, black, black 25%, transparent 25%, transparent 75%, red 75%);
}
.angle-1 { transform: translate(-50%, -50%) rotate(45deg) }
.angle-2 { transform: translate(-50%, -50%) rotate(-45deg) }
/*****************************/
/* DESKTOP specific settings */
/*****************************/
#media (min-width: 720px) and (min-height: 720px) { /* anything larger than average mobile */
/* base flexbox patch grid structure */
[patch],[patch]>* { display: flex; flex-wrap: wrap } /* patch and cell containers */
[patch] { align-content: flex-start; position: relative }
[patch]>* { flex-grow: 1; /* [MANDATORY] */
overflow: hidden; /* [OPTIONAL] */
/* Center everything inside the element (vertical and horizontal) */
justify-content: center; align-content: center; align-items: center }
/* the "nine-patch", inspired by Android 9-patch image; essentially a 3x3 matrix */
[patch^= "3x"]>* { height : 33.33333%; max-height: 33.33333% } /* ^...starts with */
[patch*= "x3"]>* { flex-basis: 33.33333%; max-width : 33.33333% } /* *...contains */
[patch^= "1x"]>* { height: 100%; max-height: 100% } [patch*= "x1"]>* { flex-basis: 100%; max-width: 100% }
[patch^= "2x"]>* { height: 50%; max-height: 50% } [patch*= "x2"]>* { flex-basis: 50%; max-width: 50% }
/* add your own specific patch cell sizes like below */
/*
7x1 days in a week, 18x8 Periodic Table, 24x1 hours in a day, 22x6 keyboard+numpad, etc.
just divide 100% by the required XxY values
Usage:
<parent-tag patch="XxY">
requires X * Y number of child-tags to work properly
<child-tag 1>
....
<child-tag N>
</parent-tag>
*/
body { background-color: rgba(0,0,0,.1) } /* light grey */
.main-structure {
flex-flow: row wrap; /* we have 3 rows of several columns */
height: 75vmin; width: 75vmin; /* Modify to your needs */
background-color: White;
}
[band*="info2"] .main-structure>[patch="1x2"] {
max-width: 75%;
/* instead of 100%, this will move the cells closer for a 'circular feel' */
}
.main-structure img { display: block; width: 80% } /* Modify to your needs */
.main-structure .outCircle {
/* flex for easy centering of '.inner' */
display: flex; /* make visible */
}
}
/**************************/
/* preferred global rules */
/**************************/
html,body { width: 100%; max-width: 100% }
html { -webkit-box-sizing: border-box; box-sizing: border-box }
*, *:before, *:after { -webkit-box-sizing: inherit; box-sizing: inherit }
body { margin: 0 } /* remove default <body> spacing */
/*
Above CSS defines ALL elements to use 'border-box' (most common practice nowadays)
make sure to own the boxmodel knowledge!
MDN 'The box model': https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/The_box_model
w3schools 'CSS box-sizing Property': https://www.w3schools.com/cssref/css3_pr_box-sizing.asp
*/
/*
All math reference: https://www.mathsisfun.com/equation_of_line.html
*/
/* responsive base font size using y = mx + b */
html { font-size: calc(0.625vmin + 0.625rem) } /* (320,12)(1280,18) */
/* Simple banding attribute for use in 'Landing Page' layout */
[band] { display: flex; flex-flow: column wrap; align-content: center }
body[padded="1"],
body[padded="0"] [band*="padded"] {
/*
responsive page padding
and responsive band padding (same as responsive page padding, but at band level)
Top/Bottom padding: p1(320,16) p2(1920, 72) => 0.035x + 4.8 => vary from 16 to 72px
Left/Right padding: p3(320, 8) p4(1920,320) => 0.195x - 54.4 => vary from 8 to 320px
'Band padding' is only active when 'page padding' is off (0)
*/
padding: calc(3.5vh + 4.8px) calc(19.5vw - 54.4px);
}
/* for debugging (put in <body>) */
[outlines="1"] * { outline: 1px dotted }
<body outlines="0" padded="0">
<div band="padded.header">
<h1>3x3 easy grid with two dummies</h1>
<h3>easy, but straight columns</h3>
</div>
<div band="padded.info1">
<div class="main-structure" patch="3x3">
<div>
<div class="headline">Meet the farmer</div>
<ul>
<li>Lorem ipsum dolor sit amet, exerci dolorem est ad.</li>
<li>Lorem ipsum dolor sit amet, exerci dolorem est ad.</li>
</ul>
</div>
<div>
<div class="headline dummy"></div>
</div>
<div>
<div class="headline">Provenance</div>
<ul>
<li>Lorem ipsum dolor sit amet, exerci dolorem est ad.</li>
<li>Lorem ipsum dolor sit amet, exerci dolorem est ad.</li>
</ul>
</div>
<div>
<div class="headline">Certification</div>
<ul>
<li>Lorem ipsum dolor sit amet, exerci dolorem est ad.</li>
<li>Lorem ipsum dolor sit amet, exerci dolorem est ad.</li>
</ul>
</div>
<div>
<img src="https://i.postimg.cc/zvBCdxp4/circles.png">
</div>
<!--div class="outCircle">
<div class="inner">
<div class="marker horiz"></div>
<div class="marker vert"></div>
<div class="marker angle-1"></div>
<div class="marker angle-2"></div>
</div>
</div -->
<div>
<div class="headline">Life of the seed</div>
<ul>
<li>Lorem ipsum dolor sit amet, exerci dolorem est ad.</li>
<li>Lorem ipsum dolor sit amet, exerci dolorem est ad.</li>
</ul>
</div>
<div>
<div class="headline">History of seed</div>
<ul>
<li>Lorem ipsum dolor sit amet, exerci dolorem est ad.</li>
<li>Lorem ipsum dolor sit amet, exerci dolorem est ad.</li>
</ul>
</div>
<div>
<div class="headline dummy"></div>
</div>
<div>
<div class="headline">IoT data this seed season</div>
<ul>
<li>Lorem ipsum dolor sit amet, exerci dolorem est ad.</li>
<li>Lorem ipsum dolor sit amet, exerci dolorem est ad.</li>
</ul>
</div>
</div>
</div>
<div band="padded.header">
<h1>3x1 nested grid with 1x2, 1x3 and 1x2 child grids</h1>
<h3>more complicated, but has rows with a 'circular feel'</h3>
</div>
<div band="padded.info2">
<div class="main-structure" patch="3x1">
<div patch="1x2">
<div>
<div class="headline">Meet the farmer</div>
<ul>
<li>Lorem ipsum dolor sit amet, exerci dolorem est ad.</li>
<li>Lorem ipsum dolor sit amet, exerci dolorem est ad.</li>
</ul>
</div>
<div>
<div class="headline">Provenance</div>
<ul>
<li>Lorem ipsum dolor sit amet, exerci dolorem est ad.</li>
<li>Lorem ipsum dolor sit amet, exerci dolorem est ad.</li>
</ul>
</div>
</div>
<div patch="1x3">
<div>
<div class="headline">Certification</div>
<ul>
<li>Lorem ipsum dolor sit amet, exerci dolorem est ad.</li>
<li>Lorem ipsum dolor sit amet, exerci dolorem est ad.</li>
</ul>
</div>
<div>
<img src="https://i.postimg.cc/zvBCdxp4/circles.png">
</div>
<!--div class="outCircle">
<div class="inner">
<div class="marker horiz"></div>
<div class="marker vert"></div>
<div class="marker angle-1"></div>
<div class="marker angle-2"></div>
</div>
</div -->
<div>
<div class="headline">Life of the seed</div>
<ul>
<li>Lorem ipsum dolor sit amet, exerci dolorem est ad.</li>
<li>Lorem ipsum dolor sit amet, exerci dolorem est ad.</li>
</ul>
</div>
</div>
<div patch="1x2">
<div>
<div class="headline">History of seed</div>
<ul>
<li>Lorem ipsum dolor sit amet, exerci dolorem est ad.</li>
<li>Lorem ipsum dolor sit amet, exerci dolorem est ad.</li>
</ul>
</div>
<div>
<div class="headline">IoT data this seed season</div>
<ul>
<li>Lorem ipsum dolor sit amet, exerci dolorem est ad.</li>
<li>Lorem ipsum dolor sit amet, exerci dolorem est ad.</li>
</ul>
</div>
</div>
</div>
</div>
</body>
You could wrap it in a div and give the <div> the following styling:
#circle {
border: solid black 2px;
border-radius: 50%;
width: 10em; //Depends on the circles size..
height: 10em;
}
I am using Bootstrap 4. There I have a carousel with picture. The images keep showing stretched. Idk what's the problem.
.carousel {
margin-bottom: 4rem;
position: relative;
}
.carousel-caption {
bottom: 3rem;
z-index: 10;
}
.carousel-inner img {
position: absolute;
top: 0;
left: 0;
height: 32rem;
object-fit: containt !important;
display: block;
}
.carousel-item {
height: 32rem;
}
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active col-xs-12 col-sm-12">
<img src="https://i.stack.imgur.com/cPtnU.jpg" class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h1>Lorem</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident, minima.</p>
</div>
</div>
<div class="carousel-item col-xs-12 col-sm-12">
<img src="https://i.stack.imgur.com/cPtnU.jpg" class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h1>Lorem</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident, minima</p>
</div>
</div>
<div class="carousel-item col-xs-12 col-sm-12">
<img src="https://i.stack.imgur.com/cPtnU.jpg" class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h1>Lorem</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident, minima</p>
</div>
</div>
</div>
</div>
It looks like this:
The original pic looks like this:
Can someone please help me to solve this problem?
Instead of using object-fit: contain !important;, have you tried using object-fit: cover !important; to achieve your desired effect?
I am assuming you are wanting to place the background in a position where it will cover from left to right as well as top to bottom without morphing the image? For this I use background-size: cover; or object-fit: cover;.
you can chnage the value of img height yo auto
.carousel-inner img {
position: absolute;
top: 0;
left: 0;
height: auto
object-fit: containt !important;
display: block;
}
or add the width auto and keep the height value :
.carousel-inner img {
....
height: 32rem;
....
width : auto; /* or 100% */
}
How can I place an image that goes from end of .col-md-4 to the end of the screen?
Here is what I have to do by design - red lines are .container boundaries, text is aligned to the left, and on the right is an image (or slider). I can't do .col-md-8 since the image needs to go as far as the screen is wide.
Can I combine .container and .container fluid somehow? What would you suggest? Image must be visible full width across all desktop sizes.
I currently did this with position absolute but this way the image is cut out and this is not desirable. https://codepen.io/ivan-topi/pen/pGYYjj
If I remove position: relative from .row and place it on .content then I can position image nicely with right: 0 to the end of the screen, but in that case I am not sure how can I position it without overlapping text on the left?
<div class="content">
<div class="container">
<div class="row">
<div class="col-md-4">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Id odio assumenda nobis recusandae voluptates itaque possimus provident libero et earum.</p>
</div>
<div class="img-wrapper">
<img src="https://via.placeholder.com/1300x450">
</div>
</div>
</div>
</div>
.content {
overflow: hidden;
height: 450px;
position: relative;
}
.row {
position: relative;
}
p {
font-size: 20px;
}
.img-wrapper {
left: 435px;
position: absolute;
width: 100%;
height: 450px;
overflow: hidden;
}
img {
width: 100%;
}
You can consider negative margin while using col-md-8. The trick is to add the amount space on the right as a negative margin to the container inside col-md-8 to create the overflow you want:
.content {
overflow: hidden;
height: 450px;
position: relative;
}
.row {
position: relative;
}
p {
font-size: 20px;
}
img {
width:100%;
}
#media (min-width: 768px) {
.negative {
margin-right: calc((720px - 100vw)/2 - 15px);
}
}
#media (min-width: 992px) {
.negative {
margin-right: calc((960px - 100vw)/2 - 15px);
}
}
#media (min-width: 1200px) {
.negative {
margin-right: calc((1140px - 100vw)/2 - 15px);
}
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<div class="content">
<div class="container">
<div class="row">
<div class="col-md-4">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Id odio assumenda nobis recusandae voluptates itaque possimus provident libero et earum.</p>
</div>
<div class="col-md-8">
<div class="negative">
<img src="https://via.placeholder.com/1300x450" class="d-block">
</div>
</div>
</div>
</div>
</div>
If i understand you, you need this:
<div class="content">
<div class="container">
<div class="row">
<div class="col-md-4 p-0 d-flex align-items-center">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Id odio assumenda nobis recusandae voluptates itaque possimus provident libero et earum.</p>
</div>
<div class="col-md-8 p-0">
<img class="img-fluid" src="https://via.placeholder.com/1300x450">
</div>
</div>
</div>
</div>
And from .img-wrapper remove position:absolute and left: 435px;
Check it here: https://codepen.io/gionic/pen/QYoPqq
I hope it helps you.
I am new here.
I am banging my heads on the keyboard as I spent the last 2 hours trying to solve this problem:
ASSETS: I have a page where I list services using an image on the left, and text on the right. Except... the following service has text on the left and image on the right, so the page looks a little bit like a chequer board. IMAGE-TEXT / TEXT-IMAGE / IMAGE-TEXT.. you get the idea. I used tables to do that. one table and one row per service, two columns for each row.
This is great on desktop; the problem is that when on mobile, my trusty responsive tables act this way: they always put the left column on top of the right column, ignoring the content. The result is that I have IMAGE then TEXT than TEXT then IMAGE etc.., which is confusing when scrolling down on mobiles. We don't know what image relates to what because you would expect a different behaviour: you would want to see IMAGE, then TEXT, then IMAGE, then TEXT etc...
I haven't found any solution to this on the web, possibly because I can't synthesise properly my question in Google! So I thought I asked you. Please any comment and approach to this kind of problem is welcome!
Here's my CSS and HTML:
section-services {
display: table;
width: 100%;
min-height: 100%;
height: inherit;
}
.row-services {
display: table-row;
width: 100%;
height: 100%;
}
.col-left-services, .col-right-services {
display: table-cell;
width: 50%;
vertical-align: middle;
}
.col-left-services {
padding-right: 10px;
}
.col-right-services {
padding-left:10px;
}
.content-services {
}
#media all and (max-width: 800px){
section-services{
display:block;
width: 100%;
}
}
#media all and (max-width: 800px){
.row-services,
.col-left-services,
.col-right-services,
.col-left-services:before,
.col-right-services:before{
display:block;
width: 100%;
margin-left: auto;
margin-right: auto;
padding-top:10px;
padding-bottom:10px;
}
}
<section-services>
<div class="row-services">
<div class="col-left-services">
<div class="content-services">
<h2 style="text-align: center;">RED FERRARI</h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed haec quidem liberius ab eo dicuntur et saepius. Plane idem, inquit, et maxima quidem, qua fieri nulla maior potest.
</div>
</div>
<div class="col-right-services">
<div class="content-services">
<img src="http://buyersguide.caranddriver.com/media/assets/submodel/6873.jpg" />
</div>
</div>
</div>
</section-services>
<section-services>
<div class="row-services">
<div class="col-left-services">
<div class="content-services">
<img src="http://buyersguide.caranddriver.com/media/assets/submodel/6866.jpg" />
</div>
</div>
<div class="col-right-services">
<div class="content-services">
<h2 style="text-align: center;">YELLOW FERRARI</h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed haec quidem liberius ab eo dicuntur et saepius. Plane idem, inquit, et maxima quidem, qua fieri nulla maior potest.
</div>
</div>
</div>
</section-services>
My approach to this is to use display: flex.
Display your DIVs in flex mode and add a class to the second paragraph to force it to the top, like this:
section-services {
display: table;
width: 100%;
min-height: 100%;
height: inherit;
}
.row-services {
display: table-row;
width: 100%;
height: 100%;
}
.col-left-services, .col-right-services {
display: table-cell;
width: 50%;
vertical-align: middle;
}
.col-left-services {
padding-right: 10px;
}
.col-right-services {
padding-left:10px;
}
.content-services {
}
#media all and (max-width: 800px){
section-services{
display:block;
width: 100%;
}
}
#media all and (max-width: 800px){
.row-services,
.col-left-services,
.col-right-services,
.col-left-services:before,
.col-right-services:before {
display:flex;
-webkit-display:flex;
-moz-display:flex;
flex-direction: column;
-webkit-flex-direction: column;
-moz-flex-direction: column;
width: 100%;
margin-left: auto;
margin-right: auto;
padding-top:10px;
padding-bottom:10px;
}
.col-floated {
order: -1;
-webkit-order: -1;
-moz-order: -1;
}
}
<section-services>
<div class="row-services">
<div class="col-left-services">
<div class="content-services">
<h2 style="text-align: center;">RED FERRARI</h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed haec quidem liberius ab eo dicuntur et saepius. Plane idem, inquit, et maxima quidem, qua fieri nulla maior potest.
</div>
</div>
<div class="col-right-services">
<div class="content-services">
<img src="http://buyersguide.caranddriver.com/media/assets/submodel/6873.jpg" />
</div>
</div>
</div>
</section-services>
<section-services>
<div class="row-services">
<div class="col-left-services">
<div class="content-services">
<img src="http://buyersguide.caranddriver.com/media/assets/submodel/6866.jpg" />
</div>
</div>
<div class="col-right-services col-floated">
<div class="content-services">
<h2 style="text-align: center;">YELLOW FERRARI</h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed haec quidem liberius ab eo dicuntur et saepius. Plane idem, inquit, et maxima quidem, qua fieri nulla maior potest.
</div>
</div>
</div>
</section-services>
Here's my problem.
I have a wrapper div(width: 800px and height: 250px) which contains two divs occupying all the space in height and dividing their width in half.
I set up my css, float the right div to float: right and this one appears where it should but "below" the other one, exceeding the wrapper div space(which shouldn't even be possibile).
I'm posting both the jdfiddle and the code.
JS Fiddle http://jsfiddle.net/FV9yC/
HTML
<div id="wrapper">
<!-- left div -->
<div id="leftDiv">
<h1>This is my heading</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
<!-- right div -->
<div id="rightDiv">
<h1>This is my heading</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
</div>
CSS
#wrapper {
background-color: grey;
height: 200px;
width: 500px; }
#leftDiv {
background-color: purple;
height: 200px;
width: 250px; }
#rightDiv {
background-color: green;
float: right;
height: 250px;
width: 250px; }
Just shift the div with ID rightDiv above the div with ID leftDiv. That's it.
Here is the WORKING SOLUTION
The Code:
<div id="wrapper">
<!-- right div -->
<div id="rightDiv">
<h1>This is my heading</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
<!-- left div -->
<div id="leftDiv">
<h1>This is my heading</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
</div>
http://jsfiddle.net/FV9yC/1/
You should add float: left to your left div.
Add float: left to the other div. Also you can use float: left for both; unless you have other reasons than just positioning there to use it.
Used to this code
#leftDiv{float:left;}
#wrapper:after{
content:"";
clear:both;
display:table;
}
#wrapper {
height:200px; // remove this line
}
Demo
try this
http://jsfiddle.net/FV9yC/5/
#wrapper {
background-color: grey;
height: 200px;
width: 500px;
}
#leftDiv {
background-color: purple;
height: 200px;
width: 250px;
float:left;
}
#rightDiv {
background-color: green;
float: right;
height: 250px;
width: 250px; }
You don't need to float your div to the right — you just need to align each block beside the other, and you can do this using float: left;.
I made a consistent solution for you. See below:
Using a class to remove the DRY of your code, I grouped your blocks into a common class with common behaviors.
See your new CSS:
#wrapper {
background-color: grey;
height: 200px;
width: 500px; }
.block {
float: left;
width: 250px;
}
#leftDiv {
background-color: purple;
height: 200px; }
#rightDiv {
background-color: green;
height: 250px; }
And your new HTML:
<div id="wrapper">
<!-- left div -->
<div class="block" id="leftDiv">
<h1>This is my heading</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
<!-- right div -->
<div class="block" id="rightDiv">
<h1>This is my heading</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
</div>
Using classes to execute common behaviors it is a good practice to avoid redundancy and future problems.
To see your code working on jsFiddle, just click here.