I would like to make my page responsive, on a smaller screen.
I haven't used bootsrtap for this, here is how it is now. Probably I should but not sure if I can :
Is it possible to use bootstrap for this absolute positioning?
Thanks a lot, I hope it s clear enough with the drawings
<div class="container-map">
<div class="top-container">
<div class="map-background">
</div>
<div class="map-filter">
</div>
</div>
<div class="map-search-results">
</div>
</div>
and the css
.top-container{
height:100%;
position:relative;
}
.map-background {
z-index: 10;
width: 100%;
height: 100%;
}
.map-filter {
z-index: 1000;
top:5%;
left:7%;
min-height:50px;
min-width:200px;
position: absolute;
}
.map-search-results{
width: 100%;
}
And here is what I would like:
This might be helpful.
body, html{
padding:0;
margin:0;
}
.top-container{
height:100%;
position:relative;
}
.map-background {
z-index: 10;
width:100%;
height: 500px;
background:lightblue;
}
.map-filter {
z-index: 1000;
top:5%;
left:7%;
min-height:50px;
min-width:200px;
position: absolute;
border:5px solid red;
}
.map-search-results{
padding:20px;
border:5px solid orange;
}
#media (max-width:767px){
.map-filter{
position: relative;
left:0;
top:0;
margin-top: 20px;
margin-bottom: 20px;
padding:20px;
}
}
<div class="container-map">
<div class="top-container">
<div class="map-background">
</div>
<div class="map-filter">
<h2>map filetr</h2>
</div>
</div>
<div class="map-search-results">
<h2>map search</h2>
</div>
</div>
* {
margin: 0;
padding: 0;
}
.map-bg {
background: url('https://www.ryansleeper.com/wp-content/uploads/2018/05/Tableau-Sales-by-State-Symbol-Map-with-Background-Map.png');
background-size: cover;
padding: 100px 20px;
}
.key-results {
padding: 40px 20px;
}
#media screen and (max-width: 767px) {
.map-bg {
background: none !important;
padding: 40px 20px !important;
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>
<section class="map-bg">
<div class="container">
<div class="row">
<div class="col-md-6 col-sm-12 col-lg-6 col-12">
<p>
What is Lorem Ipsum?
<br>
<br>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
</div>
</div>
</div>
</section>
<section class="key-results">
<div class="container">
<div class="row">
<div class="col-12">
<p>
What is Lorem Ipsum?
<br>
<br>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
</div>
</div>
</div>
</section>
</body>
</html>
If you need that map background on small devices just remove the media query.. Hope it'd help :)
Related
I'm having a problem creating a flexbox responsive grid and was hoping that someone can point me to the right direction.
I want all the .block div's to be equal height, and the .bottom div absolutely positioned to the bottom. This is actually working in the current solution, but when the h2 heading is too long and reaches 2 lines, I want all the h2 headings of the row to be the same height.
Is this possible in some way?
I made a Codepen to illustrate the problem:
http://codepen.io/kenvdbroek/pen/eZKdEQ
h1,
h2,
h3 {
margin: 0;
}
body {
margin: 0;
padding: 0;
}
ul.clean-list {
margin: 0;
padding: 0;
}
ul.clean-list li {
list-style: none;
margin-bottom: 5px;
}
li:last-child {
margin-bottom: 0;
}
.container {
padding-top: 50px;
}
.block {
margin-bottom: 30px;
border: 1px solid red;
}
.block > .bottom {
border: 1px solid blue;
}
#media only screen and (min-width: 480px) {
.row.row-flex-wrapper::before,
.row.row-flex-wrapper::after {
content: none !important;
}
.row.row-flex-wrapper::after {
clear: none;
}
.row.row-flex-wrapper {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
flex-wrap: wrap;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
}
.row.row-flex-wrapper .column {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
float: none;
border: 1px solid orange;
}
.row.row-flex-wrapper .column > .block {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
flex-direction: column;
-ms-flex-direction: column;
-webkit-flex-direction: column;
}
.row.row-flex-wrapper .column > .block > .block-list {
flex: 1 0 auto;
-ms-flex: 1 0 auto;
-webkit-flex: 1 0 auto;
}
.row.row-flex-wrapper .column > .block > h2 {}
}
#media only screen and (min-width: 480px) and (max-width: 767px) {
.container .row .column {
width: 50%;
}
}
<div class="container">
<div class="row row-flex-wrapper">
<div class="column col-sm-6 col-md-4">
<div class="block">
<h2>Title 1</h2>
<div class="block-list">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently
with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
<div class="bottom">
<ul class="clean-list">
<li>Some link
</li>
<li>Some link 2
</li>
</ul>
</div>
</div>
</div>
<div class="column col-sm-6 col-md-4">
<div class="block">
<h2>Another very long title which is actually toooo long...</h2>
<div class="block-list">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer...</p>
</div>
<div class="bottom">
<ul class="clean-list">
<li>Another button
</li>
</ul>
</div>
</div>
</div>
<div class="column col-sm-6 col-md-4">
<div class="block">
<h2>Title</h2>
<div class="block-list">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer, Lorem Ipsum has been the industry's standard dummy text...</p>
</div>
<div class="bottom">
<ul class="clean-list">
<li>Very nice link
</li>
</ul>
</div>
</div>
</div>
<div class="column col-sm-6 col-md-4">
<div class="block">
<h2>This block is cool!</h2>
<div class="block-list">
<p>Some text here. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer, Lorem Ipsum has been the industry's standard dummy
text...</p>
</div>
<div class="bottom">
<ul class="clean-list">
<li>Another link
</li>
<li>Check this item
</li>
</ul>
</div>
</div>
</div>
<div class="column col-sm-6 col-md-4">
<div class="block">
<h2>Title Block</h2>
<div class="block-list">
<p>Go check out this item... Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer, Lorem Ipsum has been the industry's standard
dummy text...</p>
</div>
<div class="bottom">
<ul class="clean-list">
<li>Button
</li>
</ul>
</div>
</div>
</div>
<div class="column col-sm-6 col-md-4">
<div class="block">
<h2>Buttonssssss</h2>
<div class="block-list">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently
with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
<div class="bottom">
<ul class="clean-list">
<li>Button
</li>
</ul>
</div>
</div>
</div>
<div class="column col-sm-6 col-md-4">
<div class="block">
<h2>Title</h2>
<div class="block-list">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</div>
<div class="bottom">
<ul class="clean-list">
<li>Link to item
</li>
<li>Link to item
</li>
</ul>
</div>
</div>
</div>
<div class="column col-sm-6 col-md-4">
<div class="block">
<h2>Title</h2>
<div class="block-list">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently
with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
<div class="bottom">
<ul class="clean-list">
<li>Link to item
</li>
</ul>
</div>
</div>
</div>
<div class="column col-sm-6 col-md-4">
<div class="block">
<h2>Another very very very very very very very long title</h2>
<div class="block-list">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently
with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
<div class="bottom">
<ul class="clean-list">
<li>Button to item
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
This is not possible with flexbox or CSS, in general.
An initial setting of a flex container is align-items: stretch. This causes flex items to expand the full length of the cross axis. This is what is known as "flex equal height columns".
Here are a few notes to keep in mind:
Equal height columns apply only to the children of a flex container. In other words, the flex items must have the same parent. Otherwise, the equal height feature doesn't apply.
Your question:
I want all the h2 headings of the row to be the same height. Is this possible in some way?
Not with CSS. Because the h2's exist in different containers, they aren't siblings (they're more like cousins), so equal heights don't apply.
Equal height columns in flexbox apply only to one flex line. Items on other lines, created by wrapping, establish their own equal height line. This means that equal height columns do not work in a multi-line flex container.
The align-self property can be used on individual flex items to override align-items, which can break the equal height feature.
By specifying a height on a flex item (e.g. height: 300px), both align-items and align-self are overridden for that item, and the equal height setting is ignored.
This post focuses on a container with flex-direction: row. If the container is flex-direction: column, then equal height becomes equal width. Here's a detailed review: Make flex items take content width, not width of parent container
More details:
Equal height rows in a flex container
How to disable equal height columns in Flexbox?
Duplicate posts:
How to get header from cards or similar to have the same height with flex box?
CSS - How to have children in different parents the same height?
Positioning nested grid items in a higher level container (a subgrid function)
Align child elements of different blocks
CSS only solution to set MULTIPLE “same height” row sections on a responsive grid
Aligning the child elements of different parent containers
Use flexbox display to align items within a row wrapper
I worked out a jQuery solution based on your example.
Add the class "eh" (equal heights) to each parent element for which you want to align some of the (sub) children, and a data-eh element containing the selectors for the child elements.
<div class="row eh" data-eh='["h2",".block-list",".bottom"]'>
and then use this function:
$('.eh').each(function(){
var $this = $(this);
var equalHeightSelectors = $this.data('eh');
$.each(equalHeightSelectors, function( index, value ) {
var min_height = 0;
var $children = $this.find(value);
$children.each(function(){
var $el = $(this);
if($el.height() > min_height){
min_height = $el.height();
}
});
$children.height(min_height);
});
});
https://codepen.io/pwkip/pen/oNvxNYZ
I am not an expert developer and have limited knowledge about CSS. I am facing overlapping problem in Safari and Internet Explorer 10+.
In Firefox, Google Crome and Opera my code is working fine but in
Safari and IE - text are overlapping.
Please supply a whole CSS code as I do not know much of it.
My code is as below:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
*, *:before, *:after { -moz-box-sizing: border-box; -webkit-box-sizing:
border-box; box-sizing: border-box; }
*{box-sizing: border-box; padding: 0; margin: 0;}
body { margin: 0;}
footer { border: 1px solid #ccc; padding: 1.25em; background-color: #c0c0c0;
}
.max-width {max-width: 1400px; margin: 0 auto;}
.site-container { position: relative; margin: .5em; }
.left-column { border: 2px solid #ccc; padding: 0.40em; }
.right-column { border: 0px solid #ccc; padding: 1.25em; background-color:
#ffffff; }
.floating-inline{display: inline-block;vertical-align: middle;}
.nav { list-style: none; margin-left: 0; margin-bottom: 0; padding-left: 0;
}
img {
max-width: 100%;
height: auto;
}
header{position: fixed; left: 0; top: 0; width: 100%; height: 70px;
background: #6633cc; z-index: 3; color: #fff; text-align:center; font-size:
20px; padding: 10px 0;}
.panel{ height: 100%; position: absolute; top: 0 }
.center{padding:0px 190px 0 207px; position: absolute; width:100%; top: 0;
left: 0; background: #ffff99; overflow-y:scroll}
.left{ padding: 5px 0 0 0; left: 0; width:200px; background: #0f0; z-
index:2;}
.right{ padding: 5px 0 0 0; right: 0; width: 200px; background: #f00; z-
index:2;}
#media (max-width: 1024px) {
.left { display: none; }
.right { display: none; }
.center{padding:0px 6px 0 10px; position: absolute; width:100%; top: 0;
left: 0; background: #ccffcc; overflow-y:scroll}
}
/* MEDIA QUERIES */
#media screen and (min-width: 47.5em )
{
.left-column { margin-right: 22.5em; }
.right-column { position: absolute; top: 0; right: 0; width: 21.75em; }
}
</style>
</head>
<body>
<header>
Nevigation Menus Goes here <br>
Menu 1 , Menu 2, Menu 3 <br>
</header>
<nav class="left panel" align="center">
<br><br><br> <img src="196 x1000-Left.jpg" width="196" height="650"
border="0" alt="img">
</nav>
<aside class="right panel" align="center">
<br><br><br>
<img src="196 x1000-Left.jpg" width="196" height="650" border="0" alt="img">
</aside>
<section class="center panel"> <br><br><br><br><br>
<div class="max-width">
<div class="site-container">
<main class="left-column">
<h2>Left Column (fluid)</h2><br>
<p align="justify" >
<b>1st Para </b> : Lorem Ipsum is simply dummy text of the
printing and typesetting industry. Lorem Ipsum has been the industry's
standard dummy text ever since the 1500s, when an unknown printer took a
galley of type and scrambled it to make a type specimen book. It has
survived not only five centuries, but also the leap into electronic
typesetting, remaining essentially unchanged. It was popularised in the
1960s with the release of Letraset sheets containing Lorem Ipsum passages,
and more recently with desktop publishing software like Aldus PageMaker
including versions of Lorem Ipsum
<br> <br>
<b>2nd Para </b>: Lorem Ipsum is simply dummy text of the
printing and typesetting industry. Lorem Ipsum has been the industry's
standard dummy text ever since the 1500s, when an unknown printer took a
galley of type and scrambled it to make a type specimen book. It has
survived not only five centuries, but also the leap into electronic
typesetting, remaining essentially unchanged. It was popularised in the
1960s with the release of Letraset sheets containing Lorem Ipsum passages,
and more recently with desktop publishing software like Aldus PageMaker
including versions of Lorem Ipsum
<br> <br>
<br> <br>
<b>3rd Para </b>:Lorem Ipsum is simply dummy text of the
printing and typesetting industry. Lorem Ipsum has been the industry's
standard dummy text ever since the 1500s, when an unknown printer took a
galley of type and scrambled it to make a type specimen book. It has
survived not only five centuries, but also the leap into electronic
typesetting, remaining essentially unchanged. It was popularised in the
1960s with the release of Letraset sheets containing Lorem Ipsum passages,
and more recently with desktop publishing software like Aldus PageMaker
including versions of Lorem Ipsum
<br> <br>
<b>4th Para </b> :Lorem Ipsum is simply dummy text of the
printing and typesetting industry. Lorem Ipsum has been the industry's
standard dummy text ever since the 1500s, when an unknown printer took a
galley of type and scrambled it to make a type specimen book. It has
survived not only five centuries, but also the leap into electronic
typesetting, remaining essentially unchanged. It was popularised in the
1960s with the release of Letraset sheets containing Lorem Ipsum passages,
and more recently with desktop publishing software like Aldus PageMaker
including versions of Lorem Ipsum
<br> <br>
<b>5th Para </b> : Lorem Ipsum is simply dummy text of the
printing and typesetting industry. Lorem Ipsum has been the industry's
standard dummy text ever since the 1500s, when an unknown printer took a
galley of type and scrambled it to make a type specimen book. It has
survived not only five centuries, but also the leap into electronic
typesetting, remaining essentially unchanged. It was popularised in the
1960s with the release of Letraset sheets containing Lorem Ipsum passages,
and more recently with desktop publishing software like Aldus PageMaker
including versions of Lorem Ipsum</p>
</main>
<aside class="right-column">
<h2>Right Column</h2><br>
<h4> This Flots below Left Column while resizing </h4>
<br>
<p align="justify">Lorem Ipsum is simply dummy text of the
printing and typesetting industry. Lorem Ipsum has been the
industry's standard dummy text ever since the 1500s, when an unknown
printer took a galley of type and scrambled it to make a type
specimen book. It has survived not only five centuries, but also the
leap into electronic typesetting, remaining essentially unchanged. It
was popularised in the 1960s with the release of Letraset sheets
containing Lorem Ipsum passages, and more recently with desktop
publishing software like Aldus PageMaker including versions of Lorem
Ipsum</p>
<br>
</aside>
</div>
<footer>
<div id="my_menu" align="center">
Home | Bloggs
| Contact
</div>
</footer>
</div>
</section>
</body>
</html>
Snapshot of problem: https://i.stack.imgur.com/PLcQd.jpg
Finally I got the answer... It was so simple....Just one word...
Removing
<main class="left-column">
Above -
Left Column (fluid)
Just adding
<aside class="full-width-aside left-column">
THATS ALL. It finally Solved my Problem
Instead of using a responsive table i managed to get 3 colums with bootstrap to display data, and with cells that got the same height, i tried to make it responsive, so the cells stay on the same line..i am not sure if my way using #media is clever and it seems not to work when its resized to super narrow. thanks
<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
<link rel="stylesheet" href="css/bootstrap.min.css">
<style type="text/css">
#media (max-width: 3500px) {
.minh {
min-height: 250px;
background-color: blue;
}
}
#media (max-width: 1200px) {
.minh {
min-height: 320px;
background-color: red;
}
}
#media (max-width: 990px) {
.minh {
min-height: 500px;
background-color: blue;
}
}
##media (max-width: 400px) {
.minh {
min-height: auto;
background-color: red;
}
}
</style>
</head>
<body>
<div class="container">
<!-- first item-->
<div class="col-md-4 col-sm-4 text-center">
<div class="overflow-hidden"><img src="http://placehold.it/350x150" alt=""></div>
<div class="text-center minh">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised </div>
<div class="text-center"><br>www.url.de</div>
</div>
<!-- second item-->
<div class="col-md-4 col-sm-4 text-center">
<div class="overflow-hidden"><img src="http://placehold.it/350x150" alt=""></div>
<div class="text-center minh">It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).</div>
<div class="text-center"><br>www.url.de</div>
</div>
<!-- third item-->
<div class="col-md-4 col-sm-4 text-center">
<div class="overflow-hidden"><img src="http://placehold.it/350x150" alt=""></div>
<div class="text-center minh">he standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested.</div>
<div class="text-center"><br>www.url.de</div>
</div>
</div>
</body>
</html>
if you want to keep the three columns always in horizontal line, you should use:
<div class="col-xs-4 text-center">
The code
<div class="col-md-4 col-sm-4 text-center">
has not sense because when the screen md becomes sm, the column has size=4 again: no changes.
Also the images can be responsive with the class thumbnail:
<div class="thumbnail">
<img src="http://placehold.it/350x150" alt=""></div>
<div>
I made an example in jsfiddle:
http://jsfiddle.net/linkita/bdvo05cg/
I am doing css/html for a school assignment, but I got stuck. I am trying to build a newsoverview but I don't know how to build this in the good/qualitative way.
Problems:
Is this a good way to put 'Laatste nieuws' in that position?
I want to get rid of the div's because I think it will be better to
use ul/li, but I don't know how I can use it in this case.
Positioning title and description of each article like the 1st
picture.
I need:
http://i.imgur.com/vz51zyA.png
I have:
http://i.imgur.com/4wTmtXu.png
<div id="newsListContainer">
<div id="newsListHeader"><h1>Laatste nieuws</h1></div>
<div class="newsListItem">
<img src="img/item3.jpg" width="100" height="75">
<h2> Lorem Ipsum is simply dummy text of the printing and typesetting industry. </h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</div>
</div>
CSS:
#newsListContainer {
float:left;
width:100%;
background: url("img/body_bg.png") repeat-y;
}
#newsListHeader{
float:left;
width:690px;
height:40px;
margin-top:10px;
margin-bottom:10px;
border-bottom:1px solid #d6d6d6;
margin-left:133px;
}
.newsListItem {
margin-left:150px;
}
.newsListItem img{
float:left;
}
HTML UPDATED:
<div id="newsListContainer">
<div id="newsListHeader"><h1>Laatste nieuws</h1></div>
<ul><li class="newsListItem">
<img src="img/item3.jpg">
<h2> Lorem Ipsum is simply dummy text of </h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry</p>
</li></ul>
<ul><li class="newsListItem">
<img src="img/item3.jpg">
<h2> Lorem Ipsum is simply dummy text of </h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry</p>
</li></ul>
</div>
CSS UPDATED:
#newsListContainer {
float:left;
width:100%;
background: url("img/body_bg.png") repeat-y;
}
#newsListHeader{
float:left;
width:690px;
height:40px;
margin-top:10px;
margin-bottom:10px;
border-bottom:1px solid #d6d6d6;
margin-left:133px;
}
.newsListItem {
/*margin-left:150px;*/
padding-left: 115px;
}
.newsListItem img{
float:left;
width: 100px;
margin-left: -115px; /* SAME AS PADDING ABOVE */
In answer to your questions, and trying not to do your assignment for you:
Yes, the header is outside the 'list' of items which is good. Do you need the <div id="newsListHeader"> container though?
A list would be better, try it and see how you get on (<ul><li class="newsListItem">News item here</li></ul>).
This can be tricky at first and there's many ways of doing it (css html news list creation little help please). My preferred technique if I know the width of the image, is to add a padding to the .newsItemContainer and then negatively margin back the image by the same width. That means that the text will always line up along that padding line.
Code snippet:
.newsListItem {
padding-left: 115px;
}
.newsListItem img {
float: left;
width: 100px;
/* Added */
margin-left: -115px;
/* SAME AS PADDING ABOVE */
}
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<div class="newsListItem">
<img src="http://placehold.it/100x75" width="100" height="75">
<h2> Lorem Ipsum is simply dummy text of the printing and typesetting industry. </h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</div>
<div class="newsListItem">
<img src="http://placehold.it/100x75" width="100" height="75">
<h2> Lorem Ipsum is simply dummy text of the printing and typesetting industry. </h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</div>
</body>
</html>
.newsListItem img{
float:left;
margin-right:16px;
}
Ok so I set my wordpress content to all float left of each other. So it will be 3 columns.
Now when the title of one div is longer, the boxes are all over the place. Here is what I mean (see image below)
Notice that the james brown title is longer and the other two boxes fall way down.
How can I get them to float up no matter how long a title is.
I have tried vertical-align:top; but that doesn't work
You can get it by two ways.
If you want your boxes top-aligned on each row : simply use a .clear element.
h2 {
font-weight: bold;
clear: left;
}
.box {
width: 50px;
min-height: 50px;
background: #ccc;
margin: 3px;
padding: 3px;
float: left;
}
.clear {
clear: both;
height: 0px;
}
<h2>Without columns</h2>
<div class="box">1 Lorem Ipsum</div>
<div class="box">2 Lorem Ipsum Lorem Ipsum</div>
<div class="box">3 Lorem Ipsum</div>
<p class="clear"> </p>
<div class="box">4 Lorem Ipsum Lorem</div>
<div class="box">5 Lorem Ipsum</div>
<div class="box">6 Lorem Ipsum</div>
<p class="clear"> </p>
<div class="box">7 Lorem Ipsum</div>
<div class="box">8 Lorem Ipsum</div>
If you want your boxes stucked to the above one, use colums (you'll need to modify a little bit your PHP code)
h2 {
font-weight: bold;
clear: left;
}
.box {
width: 50px;
min-height: 50px;
background: #ccc;
margin: 3px;
padding: 3px;
float: left;
}
.column {
width:60px;
float: left;
}
<h2>With columns</h2>
<div class="column">
<div class="box">1 Lorem Ipsum</div>
<div class="box">4 Lorem Ipsum Lorem</div>
<div class="box">7 Lorem Ipsum</div>
</div>
<div class="column">
<div class="box">2 Lorem Ipsum Lorem Ipsum</div>
<div class="box">5 Lorem Ipsum</div>
<div class="box">8 Lorem Ipsum</div>
</div>
<div class="column">
<div class="box">3 Lorem Ipsum</div>
<div class="box">6 Lorem Ipsum</div>
</div>
Using the new nth-child() selector, you can do this:
div:nth-child(3n+1) {
clear:left;
}
This way, the 1st, 4th, 7th, etc, children will move the left of the box 'clearing' all other elements.
The advantage of using this method is that you can adjust the layout responsively. For example, on mobiles you can have two in every row, on large desktops 4 in every row. There's also no non-semantic markup.
The disadvantage is that it doesn't work in IE before version 9, but you can get around that with JavaScript. e.g. jQuery:
// polyfill for browsers that don't support nth-child() CSS selectors
$('.box:nth-child(3n+1)').style('clear', 'left');
See: http://jsfiddle.net/rVHgR/