How do I make the right div be at the top instead of at the bottom?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
body
{
padding: 0;
margin: 0;
}
#all
{
width: 955px;
margin: 0 auto;
background: #F4FEC0;
}
#dleft
{
margin-right: 200px;
}
#dright
{
float: right;
width: 200px;
margin-left: 755px;
}
</style>
</head>
<body>
<div id="all">
<div id="dleft">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec et odio elit. Praesent ut sem nibh, non ultricies purus. Integer viverra dapibus nulla. Nulla quis quam mauris, et faucibus arcu. Integer quis est a libero lacinia tincidunt. Duis dignissim dui nec quam vehicula nec eleifend dolor scelerisque. Cras vehicula, mauris quis pretium gravida, justo tellus tincidunt nunc, faucibus euismod enim sapien at neque. Fusce quis elit ut elit commodo pulvinar id sit amet urna. Mauris sapien lacus, auctor eu posuere at, mattis in elit. Sed congue ultricies diam, sit amet placerat quam rutrum ac. Vivamus pellentesque tristique nisi, a consectetur sem dignissim in. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc rhoncus dolor nibh. In ornare mattis lectus, id mattis felis iaculis vel. Maecenas quis tellus eu est luctus mattis eu id urna. Vestibulum eu elit eget magna malesuada adipiscing. Vestibulum sem neque, condimentum eget luctus vel, rhoncus vel tellus. Donec egestas quam id erat dignissim tempus. Cras volutpat erat ac enim fermentum eu convallis quam porttitor. Quisque ac tellus sit amet libero interdum sodales.
</div>
<div id="dright">
menu<br />
menu<br />
menu<br />
menu<br />
</div>
</div>
</body>
</html>
#dleft
{
float:left;
width:755px;
}
#dright
{
float: left;
width: 200px;
}
#dright
{
position:absolute;
left:775px;
top:0;
width: 200px;
}
If you don't mind moving around some of your HTML, this is an easy solution:
From #dright, remove the margin-left property.
In the HTML, move <div id="dright"> to before <div id="dleft">.
To #all, add overflow: auto - this is required to clear the float if your right <div> becomes higher than your left.
Your dleft div doesn't have a width set and will therefore try to fill the whole of it's container. Either set a width for dleft, seeing as the width of the container is 955px then this should be no more than 755px, or have position:absolute; top:0; in the CSS for dright.
Related
Ok, now that I hate CSS enough for 3 lifetimes, I come here requiring your help.
This seems to be the simplest problem but looks like I'm bad at graphical stuff.
I have this page that contains a map and a sidebar. In this sidebar I want two sections : search and results. I want search to stay on top, so I wrote this so far :
{% block body %}
<div id="app">
<div id="sidebar" class="sidebar pt-3">
<h3 class="text-center">
Recherche
</h3>
<div id="sidebar-search" class="sidebar-search">
<form class="form pr-3 pl-3">
<div class="input-group mb-2">
<input id="search-area-input" class="form-control" type="text" placeholder="2000">
<div class="input-group-append">
<div class="input-group-text">m²</div>
<button id="search-button" type="submit" class="form-control btn btn-primary">Rechercher</button>
</div>
</div>
</form>
</div>
<hr />
<div class="scrollable">
<div class="sidebar-result">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vitae tempor neque. Fusce rutrum iaculis tellus, et sollicitudin diam sodales nec. Morbi iaculis consequat ornare. Curabitur congue porttitor tellus ut dapibus. Donec placerat commodo augue et aliquet. Aliquam condimentum finibus nisl, nec scelerisque lectus pellentesque eu. Pellentesque non bibendum mi, sit amet mattis lorem. Vivamus elementum, mauris id vulputate porttitor, risus massa convallis diam, aliquet ultrices ligula ligula euismod neque.</div>
<div class="sidebar-result">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vitae tempor neque. Fusce rutrum iaculis tellus, et sollicitudin diam sodales nec. Morbi iaculis consequat ornare. Curabitur congue porttitor tellus ut dapibus. Donec placerat commodo augue et aliquet. Aliquam condimentum finibus nisl, nec scelerisque lectus pellentesque eu. Pellentesque non bibendum mi, sit amet mattis lorem. Vivamus elementum, mauris id vulputate porttitor, risus massa convallis diam, aliquet ultrices ligula ligula euismod neque.</div>
<div class="sidebar-result">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vitae tempor neque. Fusce rutrum iaculis tellus, et sollicitudin diam sodales nec. Morbi iaculis consequat ornare. Curabitur congue porttitor tellus ut dapibus. Donec placerat commodo augue et aliquet. Aliquam condimentum finibus nisl, nec scelerisque lectus pellentesque eu. Pellentesque non bibendum mi, sit amet mattis lorem. Vivamus elementum, mauris id vulputate porttitor, risus massa convallis diam, aliquet ultrices ligula ligula euismod neque.</div>
</div>
</div>
<div id="map"></div>
</div>
{% endblock %}
With this CSS :
html, body {
height: 100%;
}
# From extended template
.navbar {
position: absolute;
left: 0;
right: 0;
}
#app {
height: 100%;
padding-top: 56px; #exclude bootstrap navbar
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
#map {
height: 100%;
background: red;
}
#sidebar {
height: 100%;
float: left;
width: 400px;
background: white;
}
#sidebar .scrollable {
overflow-y: auto;
}
And this damn div won't scroll, even tho it's clearly overflowing the parent div
div sidebar :
div sidebar direct child that overflows but won't scroll:
Please help me get free from this hell.
EDIT
Found an even better way to do that :
<div id="sidebar">
<div id="sidebar-search"></div>
<div id="sidebar-results"></div>
</div>
With CSS:
#sidebar {
float: left;
height: 100%;
display: flex;
flex-flow: column;
background: white;
width: 400px;
}
#sidebar-search {
width: 100%;
max-height: 40%;
flex-shrink: 0;
overflow-y: auto;
}
#sidebar-results {
flex-grow: 1;
width: 100%;
overflow-y: auto;
}
This solves the problem I encountered later when modifying the content (1st div height became variable) and z-index issue with absolute div.
Ok so this was not letting me sleep, I got out of bed again to check that.
I made a container div absolute and padded top to start the content after the search area, and a div inside, with height 100% and overflow-y auto :
{% block body %}
<div id="app">
<div id="sidebar" class="sidebar pt-3">
<h3 class="text-center">
Recherche
</h3>
<div id="sidebar-search" class="sidebar-search">
<form class="form pr-3 pl-3">
<div class="input-group mb-2">
<input id="search-area-input" class="form-control" type="text" placeholder="2000">
<div class="input-group-append">
<div class="input-group-text">m²</div>
<button id="search-button" type="submit" class="form-control btn btn-primary">Rechercher</button>
</div>
</div>
</form>
</div>
<hr />
<div id="sidebar-results" class="text-justify">
<div class="scrollable pl-3 pr-3">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vitae tempor neque. Fusce rutrum iaculis tellus, et sollicitudin diam sodales nec. Morbi iaculis consequat ornare. Curabitur congue porttitor tellus ut dapibus. Donec placerat commodo augue et aliquet. Aliquam condimentum finibus nisl, nec scelerisque lectus pellentesque eu. Pellentesque non bibendum mi, sit amet mattis lorem. Vivamus elementum, mauris id vulputate porttitor, risus massa convallis diam, aliquet ultrices ligula ligula euismod neque.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vitae tempor neque. Fusce rutrum iaculis tellus, et sollicitudin diam sodales nec. Morbi iaculis consequat ornare. Curabitur congue porttitor tellus ut dapibus. Donec placerat commodo augue et aliquet. Aliquam condimentum finibus nisl, nec scelerisque lectus pellentesque eu. Pellentesque non bibendum mi, sit amet mattis lorem. Vivamus elementum, mauris id vulputate porttitor, risus massa convallis diam, aliquet ultrices ligula ligula euismod neque.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vitae tempor neque. Fusce rutrum iaculis tellus, et sollicitudin diam sodales nec. Morbi iaculis consequat ornare. Curabitur congue porttitor tellus ut dapibus. Donec placerat commodo augue et aliquet. Aliquam condimentum finibus nisl, nec scelerisque lectus pellentesque eu. Pellentesque non bibendum mi, sit amet mattis lorem. Vivamus elementum, mauris id vulputate porttitor, risus massa convallis diam, aliquet ultrices ligula ligula euismod neque.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vitae tempor neque. Fusce rutrum iaculis tellus, et sollicitudin diam sodales nec. Morbi iaculis consequat ornare. Curabitur congue porttitor tellus ut dapibus. Donec placerat commodo augue et aliquet. Aliquam condimentum finibus nisl, nec scelerisque lectus pellentesque eu. Pellentesque non bibendum mi, sit amet mattis lorem. Vivamus elementum, mauris id vulputate porttitor, risus massa convallis diam, aliquet ultrices ligula ligula euismod neque.
</div>
</div>
</div>
<div id="map"></div>
</div>
{% endblock %}
And the css corresponding :
html, body {
height: 100%;
}
.navbar {
position: absolute;
left: 0;
right: 0;
}
#app {
height: 100%;
padding-top: 56px;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
#map {
height: 100%;
background: red;
}
#sidebar {
height: 100%;
float: left;
width: 400px;
background: white;
position: relative;
}
#sidebar-results {
position: absolute;
padding-top: 130px;
top: 0;
height: 100%;
}
#sidebar-results > .scrollable {
height: 100%;
overflow-y: auto;
}
Now I got no scrollbar on the far right and only the results will scroll
You need to use fixed height to enable the overflow-scroll.
#sidebar .scrollable {
overflow-y: scroll;
height: 155px;
}
Here you can check this demo
html, body {
height: 100%;
}
# From extended template
.navbar {
position: absolute;
left: 0;
right: 0;
}
#app {
height: 100%;
padding-top: 56px; #exclude bootstrap navbar
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
#map {
height: 100%;
background: red;
}
#sidebar {
height: 100%;
float: left;
width: 400px;
background: white;
}
#sidebar .scrollable {
overflow-y: scroll;
height: 155px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div id="app">
<div id="sidebar" class="sidebar pt-3">
<h3 class="text-center">
Recherche
</h3>
<div id="sidebar-search" class="sidebar-search">
<form class="form pr-3 pl-3">
<div class="input-group mb-2">
<input id="search-area-input" class="form-control" type="text" placeholder="2000">
<div class="input-group-append">
<div class="input-group-text">m²</div>
<button id="search-button" type="submit" class="form-control btn btn-primary">Rechercher</button>
</div>
</div>
</form>
</div>
<hr />
<div class="scrollable">
<div class="sidebar-result">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vitae tempor neque. Fusce rutrum iaculis tellus, et sollicitudin diam sodales nec. Morbi iaculis consequat ornare. Curabitur congue porttitor tellus ut dapibus. Donec placerat commodo augue et aliquet. Aliquam condimentum finibus nisl, nec scelerisque lectus pellentesque eu. Pellentesque non bibendum mi, sit amet mattis lorem. Vivamus elementum, mauris id vulputate porttitor, risus massa convallis diam, aliquet ultrices ligula ligula euismod neque.</div>
<div class="sidebar-result">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vitae tempor neque. Fusce rutrum iaculis tellus, et sollicitudin diam sodales nec. Morbi iaculis consequat ornare. Curabitur congue porttitor tellus ut dapibus. Donec placerat commodo augue et aliquet. Aliquam condimentum finibus nisl, nec scelerisque lectus pellentesque eu. Pellentesque non bibendum mi, sit amet mattis lorem. Vivamus elementum, mauris id vulputate porttitor, risus massa convallis diam, aliquet ultrices ligula ligula euismod neque.</div>
<div class="sidebar-result">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vitae tempor neque. Fusce rutrum iaculis tellus, et sollicitudin diam sodales nec. Morbi iaculis consequat ornare. Curabitur congue porttitor tellus ut dapibus. Donec placerat commodo augue et aliquet. Aliquam condimentum finibus nisl, nec scelerisque lectus pellentesque eu. Pellentesque non bibendum mi, sit amet mattis lorem. Vivamus elementum, mauris id vulputate porttitor, risus massa convallis diam, aliquet ultrices ligula ligula euismod neque.</div>
</div>
</div>
<div id="map"></div>
</div>
</body>
</html>
Currently stuck on how to align the textbox and button on the same line with 50% width (in footer), can anyone give me some sort or guide or able to fix this issue for me?
[Extra questions, any further support or guidance would be appreciated, Wireframe given for basic idea]
One being how to put spacing between the text and picture that are aligned below the navbar.
Below that, how to put a thin border for each separate picture and box of text.
(Sorry if i'm not allowed to ask extra questions)
You could use css flexbox to achieve the
"align the textbox and button on the same line with 50% width"
part Specifically, add
form .container {
display: flex;
align-items: center;
justify-content: space-between;
}
to your css file. I included the modified project below so that you could check the effect. More about CSS flexbox at here.
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: #111;
}
.paragraph {
padding: 5px;
}
.row {
display: flex;
}
/* Create three equal columns that sits next to each other */
.column {
flex: 33.33%;
padding: 5px;
}
.footer {
position: relative;
right: 0;
bottom: 0;
left: 0;
padding: 1rem;
text-align: center;
}
form .container {
display: flex;
align-items: center;
justify-content: space-between;
}
input[type=text] {
width: 50%;
padding: 15px;
margin: 5px 0 5px 0;
display: inline-block;
border: none;
background: #f1f1f1;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="main.css">
<title>Chollerton Tearooms</title>
</head>
<body>
<ul>
<li><a class="" href="index.html">Home</a></li>
<li>Find out more</li>
<li>Credits</li>
<li>Wireframe</li>
<li>Admin</li>
</ul>
<div class="main-column">
<div class="paragraph">
<img src="Tearoom.png" alt="Holiday" width="400" height="200" align="left">
<h1> Tearoom</h1>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam pellentesque, quam finibus eleifend venenatis, augue velit finibus orci, a pretium nisi dolor vitae elit. Nam dignissim urna a turpis cursus malesuada. Vestibulum bibendum quis dui scelerisque laoreet. Aliquam tempus, leo ornare finibus elementum, est felis venenatis arcu, eu ultricies ipsum neque id tellus. Praesent ut ipsum malesuada, blandit nulla vitae, blandit orci. Aliquam erat volutpat. Sed porta consectetur tempus. Vestibulum ac tincidunt ipsum. Suspendisse volutpat non magna id placerat. Nullam et mi eu lacus lacinia sodales. Sed non interdum ante. Nam eu posuere ipsum. Nullam pulvinar ipsum euismod tellus vulputate ullamcorper. Maecenas ac quam vulputate, venenatis mi eget, dictum erat.
</p>
</div>
</div>
<br><br><br><br>
<div class="row">
<div class="column">
<img src="Craftshop.png" alt="Craft" style="width:100%">
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam pellentesque, quam finibus eleifend venenatis, augue velit finibus orci, a pretium nisi dolor vitae elit. Nam dignissim urna a turpis cursus malesuada. Vestibulum bibendum quis dui scelerisque laoreet. Aliquam tempus, leo ornare finibus elementum, est felis venenatis arcu, eu ultricies ipsum neque id tellus. Praesent ut ipsum malesuada, blandit nulla vitae, blandit orci. Aliquam erat volutpat. Sed porta consectetur tempus. Vestibulum ac tincidunt ipsum. Suspendisse volutpat non magna id placerat. Nullam et mi eu lacus lacinia sodales. Sed non interdum ante. Nam eu posuere ipsum. Nullam pulvinar ipsum euismod tellus vulputate ullamcorper. Maecenas ac quam vulputate, venenatis mi eget, dictum erat.
</div>
<div class="column">
<img src="General%20Store.jpg" alt="Store" style="width:100%">
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam pellentesque, quam finibus eleifend venenatis, augue velit finibus orci, a pretium nisi dolor vitae elit. Nam dignissim urna a turpis cursus malesuada. Vestibulum bibendum quis dui scelerisque laoreet. Aliquam tempus, leo ornare finibus elementum, est felis venenatis arcu, eu ultricies ipsum neque id tellus. Praesent ut ipsum malesuada, blandit nulla vitae, blandit orci. Aliquam erat volutpat. Sed porta consectetur tempus. Vestibulum ac tincidunt ipsum. Suspendisse volutpat non magna id placerat. Nullam et mi eu lacus lacinia sodales. Sed non interdum ante. Nam eu posuere ipsum. Nullam pulvinar ipsum euismod tellus vulputate ullamcorper. Maecenas ac quam vulputate, venenatis mi eget, dictum erat.
</div>
<div class="column">
<img src="B&B.jpg" alt="Bed and breakfast" style="width:100%">
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam pellentesque, quam finibus eleifend venenatis, augue velit finibus orci, a pretium nisi dolor vitae elit. Nam dignissim urna a turpis cursus malesuada. Vestibulum bibendum quis dui scelerisque laoreet. Aliquam tempus, leo ornare finibus elementum, est felis venenatis arcu, eu ultricies ipsum neque id tellus. Praesent ut ipsum malesuada, blandit nulla vitae, blandit orci. Aliquam erat volutpat. Sed porta consectetur tempus. Vestibulum ac tincidunt ipsum. Suspendisse volutpat non magna id placerat. Nullam et mi eu lacus lacinia sodales. Sed non interdum ante. Nam eu posuere ipsum. Nullam pulvinar ipsum euismod tellus vulputate ullamcorper. Maecenas ac quam vulputate, venenatis mi eget, dictum erat.
</div>
</div>
<div class="footer"> what i did to ensure that the footer stayed in the correct position was actually setting the position to be absolute, this will stop it from overlapping.</div>
<form action="/action_page.php" style="border:1px solid #ccc">
<div class="container">
<input type="text" placeholder="Enter Email" name="email" required>
<div class="clearfix">
<button type="submit" class="signupbtn">Subscribe </button>
</div>
</div>
</form>
</body>
</html>
As of adding space between image and text, you could simply apply a margin or some padding to the image. Something like this will do:
.desired-img {
margin: 5px;
}
To add border to a paragraph, simply use css to style your border. Something like this will do the job:
.column {
border: 1px solid lightgrey;
}
Hope this helps!
You need to remove the button from it's own div block element and put inline with the input. I've set the .container div to 50% and centered aligned the input and button. To add space between your image and text, just and a margin to the right and bottom. And you can simple add a border attribute to your .column class to give a thin border:
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: #111;
}
#holidayImg {
margin: 0px 20px 20px 0px;
}
.paragraph {
padding: 5px;
}
{
box-sizing: border-box;
}
.row {
display: flex;
}
/* Create three equal columns that sits next to each other */
.column {
flex: 33.33%;
padding: 5px;
border: solid 1px #ccc;
margin: 0px 5px;
border-radius 4px;
}
.footer {
position: relative;
right: 0;
bottom: 0;
left: 0;
padding: 1rem;
text-align: center;
}
.container {
display: flex;
}
input[type=text] {
padding: 15px;
margin: 5px;
display: inline-block;
border: none;
background: #f1f1f1;
width: 50%;
}
.signupbtn {
width: 50%;
margin: 5px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="main.css">
<title>Chollerton Tearooms</title>
</head>
<body>
<ul>
<li><a class="" href="index.html">Home</a></li>
<li>Find out more</li>
<li>Credits</li>
<li>Wireframe</li>
<li>Admin</li>
</ul>
<div class="main-column">
<div class="paragraph">
<img src="Tearoom.png" alt="Holiday" width="400" height="200" align="left" id="holidayImg">
<h1> Tearoom</h1>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam pellentesque, quam finibus eleifend venenatis, augue velit finibus orci, a pretium nisi dolor vitae elit. Nam dignissim urna a turpis cursus malesuada. Vestibulum bibendum quis dui scelerisque
laoreet. Aliquam tempus, leo ornare finibus elementum, est felis venenatis arcu, eu ultricies ipsum neque id tellus. Praesent ut ipsum malesuada, blandit nulla vitae, blandit orci. Aliquam erat volutpat. Sed porta consectetur tempus. Vestibulum
ac tincidunt ipsum. Suspendisse volutpat non magna id placerat. Nullam et mi eu lacus lacinia sodales. Sed non interdum ante. Nam eu posuere ipsum. Nullam pulvinar ipsum euismod tellus vulputate ullamcorper. Maecenas ac quam vulputate, venenatis
mi eget, dictum erat.
</p>
</div>
</div>
<br><br><br><br>
<div class="row">
<div class="column">
<img src="Craftshop.png" alt="Craft" style="width:100%">
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam pellentesque, quam finibus eleifend venenatis, augue velit finibus orci, a pretium nisi dolor vitae elit. Nam dignissim urna a turpis cursus malesuada. Vestibulum bibendum quis dui scelerisque
laoreet. Aliquam tempus, leo ornare finibus elementum, est felis venenatis arcu, eu ultricies ipsum neque id tellus. Praesent ut ipsum malesuada, blandit nulla vitae, blandit orci. Aliquam erat volutpat. Sed porta consectetur tempus. Vestibulum
ac tincidunt ipsum. Suspendisse volutpat non magna id placerat. Nullam et mi eu lacus lacinia sodales. Sed non interdum ante. Nam eu posuere ipsum. Nullam pulvinar ipsum euismod tellus vulputate ullamcorper. Maecenas ac quam vulputate, venenatis
mi eget, dictum erat.
</div>
<div class="column">
<img src="General%20Store.jpg" alt="Store" style="width:100%">
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam pellentesque, quam finibus eleifend venenatis, augue velit finibus orci, a pretium nisi dolor vitae elit. Nam dignissim urna a turpis cursus malesuada. Vestibulum bibendum quis dui scelerisque
laoreet. Aliquam tempus, leo ornare finibus elementum, est felis venenatis arcu, eu ultricies ipsum neque id tellus. Praesent ut ipsum malesuada, blandit nulla vitae, blandit orci. Aliquam erat volutpat. Sed porta consectetur tempus. Vestibulum
ac tincidunt ipsum. Suspendisse volutpat non magna id placerat. Nullam et mi eu lacus lacinia sodales. Sed non interdum ante. Nam eu posuere ipsum. Nullam pulvinar ipsum euismod tellus vulputate ullamcorper. Maecenas ac quam vulputate, venenatis
mi eget, dictum erat.
</div>
<div class="column">
<img src="B&B.jpg" alt="Bed and breakfast" style="width:100%">
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam pellentesque, quam finibus eleifend venenatis, augue velit finibus orci, a pretium nisi dolor vitae elit. Nam dignissim urna a turpis cursus malesuada. Vestibulum bibendum quis dui scelerisque
laoreet. Aliquam tempus, leo ornare finibus elementum, est felis venenatis arcu, eu ultricies ipsum neque id tellus. Praesent ut ipsum malesuada, blandit nulla vitae, blandit orci. Aliquam erat volutpat. Sed porta consectetur tempus. Vestibulum
ac tincidunt ipsum. Suspendisse volutpat non magna id placerat. Nullam et mi eu lacus lacinia sodales. Sed non interdum ante. Nam eu posuere ipsum. Nullam pulvinar ipsum euismod tellus vulputate ullamcorper. Maecenas ac quam vulputate, venenatis
mi eget, dictum erat.
</div>
</div>
<div class="footer"> what i did to ensure that the footer stayed in the correct position was actually setting the position to be absolute, this will stop it from overlapping.</div>
<form action="/action_page.php" style="border:1px solid #ccc">
<div class="container">
<input type="text" placeholder="Enter Email" name="email" required>
<button type="submit" class="signupbtn">Subscribe </button>
</div>
</form>
</body>
</html>
If I understand what you're asking, you can add another class as follows:
<div class="container">
<input type="text" placeholder="Enter Email" name="email" required class="side-by-side">
<div class="clearfix side-by-side">
<button type="submit" class="signupbtn">Subscribe </button>
</div>
</div>
// CSS added to get effect
.container {
width: 100%;
float: right;
}
.side-by-side {
display: inline;
}
This way it stays on 1 line and stays on the right side similar to your wireframe.
I have created 2 div one with float: left and one with float : right, each with 50% column width. Still they don't flow as expected. The second float not just on the right side of the first div but below the first div. Float doesn't behave according to the rule. So what rule am I missing here ?
<html>
<head>
<title>
</title>
<style type="text/css">
.column {
width: 50%;
}
div.right {
float: right;
}
}
div.left {
float: left;
}
img {
float: right;
margin: 0 0 1em 1em;
}
</style>
</head>
<body>
<div class='left column'>
<img src="css-float.png">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit.
</div>
<div class='right column'>
<img src="css-float.png">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit.
</div>
</body>
</html>
Your CSS is invalid, so stopping the rest of your stylesheet loading.
See here:
div.right {
float: right;
}
}
You are closing the rule twice, remove the second closing bracket
Fiddle
.column {
width: 49%;
}
div.left, div.right {
float: left;
border-right: 1px solid;
}
Reduce your width. You need side by side, So you add float left since both are under same container.
Demo.
.column {
width: 50%;
}
div.right {
float: right;
}
div.left {
float: left;
}
img {
float: right;
padding-right: 15px;
margin: 0 0 1em 1em;
}
I set color-background for .header and .footer to yellow. But it also sets same background colors for the content div, why ? It isn't logicial.
<html>
<head>
<title>
</title>
<style type="text/css">
.header {
background-color: yellow;
}
.footer {
background-color: yellow;
}
.column {
width: 50%;
}
div.right {
float: right;
}
div.left {
float: left;
}
img {
float: right;
margin: 0 0 1em 1em;
}
</style>
</head>
<body>
<div class='header'>
header
</div>
<div class='left column'>
<img src="css-float.png">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit.
</div>
<div class='right column'>
<img src="css-float.png">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit.
</div>
<div class='footer'>
footer
</div>
</body>
</html>
You haven't cleared the floats so the divs are collapsing
You can fix it with
.footer {
background-color: yellow;
clear:both;
}
JSfiddle Demo
Mathiasaurus is spot on. You could clear your non floating elements, mainly the footer.
.header,
.footer {
width: 100%;
clear: both;
}
or add
.header,
.footer {
width: 100%;
float: left;
}
to include them in the flow.
Putting display: inline-block and setting widths to your header and footer seem to remedy the issue!
http://jsfiddle.net/MathiasaurusRex/jm78Z/4/
div{
display: inline-block;
width: 100%;
}
.header{
width: 100%;
}
.footer{
width: 100%;
}
because u have the same class name for the different div's! And Also the same id's i guess!
<div class='header'>
header
try doing dis for your next div tag
<div class='header1' >
header
in order for the css to work in different manner for different div tags u must have different identites of each div tag!
I think this link will help you
http://www.w3schools.com/css/css_selectors.asp
so here is the problem i'm trying to solve, i want to use a background image that is 500px wide for my divs that has a drop shadow on the right edge however i want the text to stop and wrap after 475px and i still want the entire image to show up to include the dropshadow. is there anyway to accomplish this?
html code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<link href="tech/sandbox2.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="page1top">top</div>
<div id="page1mid">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sodales, sapien vel porttitor eleifend, dui ante rutrum ligula, sed volutpat urna sapien vitae nisl. Vestibulum iaculis ligula elit, in dapibus urna. Aenean ullamcorper varius porttitor. Etiam facilisis ipsum vitae nulla gravida convallis sollicitudin nibh gravida. Fusce in turpis magna, at tempus lorem. Nulla sed mi libero. Aenean vulputate ultricies enim, sit amet vulputate arcu condimentum sed. Duis arcu metus, lobortis nec commodo non, suscipit semper lectus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Phasellus sit amet condimentum elit. Nullam interdum elit sapien. Curabitur lorem ligula, aliquam quis rhoncus ac, egestas vitae tellus. Phasellus quis massa quis eros gravida mollis posuere nec mi.</div>
<div id="page1btm">this is the bottom</div>
</body>
</html>
css code:
#charset "UTF-8";
/* CSS Document */
#page1top{
position:relative;
background:url(../media/page1top.png) no-repeat;
width:500px;
}
#page1mid{
position:relative;
background:url(../media/page1mid.png) repeat;
overflow:visible;
width:500px;
height:auto;
padding:30;
margin:30;
top:-10;
}
#page1btm{
position:relative;
width:500px;
background:url(../media/page1btm.png) no-repeat;
}
Use nested <div> tags. While #Robusto's suggestion is not incorrect, it is not semantically desirable. It mixes a design element with a style descriptor. Your block elements should determine such design spacing, and then use your element styles to control the margin/padding of the text itself.
CSS:
#page1top{
position:relative;
background:url(../media/page1top.png) no-repeat;
width:500px;
}
#page1mid{
position:relative;
background:url(../media/page1mid.png) repeat;
overflow:visible;
width:500px;
height:auto;
padding:30;
margin:30;
top:-10;
}
#page1btm{
position:relative;
width:500px;
background:url(../media/page1btm.png) no-repeat;
}
.content_container{
width: 475px;
overflow: inherit;
}
HTML:
<div id="page1top">top</div>
<div id="page1mid">
<div class="content_container">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sodales, sapien vel porttitor eleifend, dui ante rutrum ligula, sed volutpat urna sapien vitae nisl. Vestibulum iaculis ligula elit, in dapibus urna. Aenean ullamcorper varius porttitor. Etiam facilisis ipsum vitae nulla gravida convallis sollicitudin nibh gravida. Fusce in turpis magna, at tempus lorem. Nulla sed mi libero. Aenean vulputate ultricies enim, sit amet vulputate arcu condimentum sed. Duis arcu metus, lobortis nec commodo non, suscipit semper lectus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Phasellus sit amet condimentum elit. Nullam interdum elit sapien. Curabitur lorem ligula, aliquam quis rhoncus ac, egestas vitae tellus. Phasellus quis massa quis eros gravida mollis posuere nec mi.</p>
</div>
</div>
<div id="page1btm">this is the bottom</div>
Keep the div at 500px wide and put the text in a p tag inside it, setting the p tag to 475px in width.
<div class="shadow-div" style="width:500px">
<p style="width:475px">
Text here blah blah blah.
</p>
</div>
If you declare units on your padding, this would probably happen for you automatically. Change padding: 30; to padding: 30px;. If you need more padding, just adjust the number. If you don't want the padding to be even on each side, write it like this: padding: 10px 25px 10px 10px;. The measurements travel clockwise so it goes top, right, bottom, left;
Can you modify your HTML?
<div class="fancybackground"><div class="text">something</div></div>
CSS:
.fancybackground { background: url(...) }
.text { margin-right: 25px; }