I'm currently building a responsive website with bootstrap but I've faced an issue, with reference to the code below, I'm unable to have them "align" with each other.
This rough sketch would be what I want my end result to turn out
<div class="container">
<div class="row-fluid">
<div class="col-sm-6 col-md-4">
<h3><a href="#" onclick="hide;" >1Cross-country cycling</a></h3>
<p>Cross-country cycling is defined by the terrain on which it is performed. XC courses and trails consist of a mix of rough forest paths and singletrack (also referred to as doubletrack depending on width), smooth fireroads, and even paved paths connecting other trails. Riding or racing is also only deemed cross-country if the technical complexity of the trails is easy or moderate. Trails difficult even to experienced riders are more often dubbed "all-mountain", "freeride", or "downhill".</p>
</div>
<div class="col-sm-6 col-md-4">
<h3>2Mountain bike trials</h3>
<p>Trials riding is an extreme test of bicycle handling skills, over all kinds of obstacles, both natural and man-made. It now has a strong - though small - following worldwide, though it is still primarily a European sport. Skills taken from trials riding can be used practically on any bicycle for balance, for example controlled braking and track standing, or balancing on the bike without putting a foot down. Competition trial bikes are characterized by powerful brakes, wide handlebars, lightweight parts, single-speed low gearing, low tire pressures with a thick rear tire, distinctive frame geometry, and usually no seat.</p>
</div>
<div class="col-sm-6 col-md-4">
<h3>3Enduro</h3>
<p>Enduro is a form of Mountain bike racing in which there is a number of timed downhill sections of trail, and a number of uphill transfer stages, which are not timed, but might have time limits to complete. It is a stage-race format where the winner is the rider who accumulates the lowest combined time from the various timed sections. Mountain bike enduro competitions typically take place over the course of 1 or 2 days, however, week-long enduro competitions do also exist.</p>
</div>
<div class="col-sm-6 col-md-4">
<h3>4Freeride </h3>
<p>The term freeriding was originally coined by snowboarders, meaning riding without a set course, goals or rules on natural terrain. In mountain biking, it is riding trail with the most creative line possible that includes style, amplitude, control, and speed.</p>
</div>
<div class="col-sm-6 col-md-4">
<h3>5Dirt jumping</h3>
<p>Dirt jumping is one of the names given to the practice of riding bikes over cement type jumps of dirt or soil and becoming airborne. The idea is that after riding over the 'take off' the rider will become momentarily airborne, and aim to land on the 'landing'.</p>
</div>
<div class="col-sm-6 col-md-4">
<h3>6Downhill mountain biking (DH)</h3>
<p>Downhill mountain biking (DH) is a genre of mountain biking practiced on steep, rough terrain that often features jumps, drops, rock gardens and other obstacles. Downhill bikes are heavier and stronger than other mountain bikes and feature front and rear suspension with over 8 inches (200mm) or (20cm) of travel, to glide quickly over rocks and tree roots.
</p>
</div>
</div>
</div>
view my JSFiddle here : https://jsfiddle.net/he4rtbr0ken/gcc3oxoj/1/
Weiping Hi there.
You may find it better just to add 2 items per row.
You will run into a problem with using a fixed height with the text when the div is compressed.
Have a look at this FIDDLE HERE.
<html>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<body>
<!--column examples-->
<div class="container">
<div class="row">
<div class="col-md-4 col-sm-6">
<h3><a href="#" onclick="hide;" >1Cross-country cycling</a></h3>
<p>Cross-country cycling is defined by the terrain on which it is performed. XC courses and trails consist of a mix of rough forest paths and singletrack (also referred to as doubletrack depending on width), smooth fireroads, and even paved paths
connecting other trails. Riding or racing is also only deemed cross-country if the technical complexity of the trails is easy or moderate. Trails difficult even to experienced riders are more often dubbed "all-mountain", "freeride", or "downhill".</p>
</div>
<div class="col-md-4 col-sm-6">
<h3>2Mountain bike trials</h3>
<p>Trials riding is an extreme test of bicycle handling skills, over all kinds of obstacles, both natural and man-made. It now has a strong - though small - following worldwide, though it is still primarily a European sport. Skills taken from trials
riding can be used practically on any bicycle for balance, for example controlled braking and track standing, or balancing on the bike without putting a foot down. Competition trial bikes are characterized by powerful brakes, wide handlebars,
lightweight parts, single-speed low gearing, low tire pressures with a thick rear tire, distinctive frame geometry, and usually no seat.</p>
</div>
</div><!-- end row -->
<div class="row">
<div class="col-md-4 col-sm-6">
<h3>3Enduro</h3>
<p>Enduro is a form of Mountain bike racing in which there is a number of timed downhill sections of trail, and a number of uphill transfer stages, which are not timed, but might have time limits to complete. It is a stage-race format where the winner
is the rider who accumulates the lowest combined time from the various timed sections. Mountain bike enduro competitions typically take place over the course of 1 or 2 days, however, week-long enduro competitions do also exist.</p>
</div>
<div class="col-md-4 col-sm-6">
<h3>4Freeride </h3>
<p>The term freeriding was originally coined by snowboarders, meaning riding without a set course, goals or rules on natural terrain. In mountain biking, it is riding trail with the most creative line possible that includes style, amplitude, control,
and speed.</p>
</div>
</div><!-- end row -->
<div class="row">
<div class="col-md-4 col-sm-6">
<h3>5Dirt jumping</h3>
<p>Dirt jumping is one of the names given to the practice of riding bikes over cement type jumps of dirt or soil and becoming airborne. The idea is that after riding over the 'take off' the rider will become momentarily airborne, and aim to land
on the 'landing'.</p>
</div>
<div class="col-md-4 col-sm-6">
<h3>6Downhill mountain biking (DH)</h3>
<p>Downhill mountain biking (DH) is a genre of mountain biking practiced on steep, rough terrain that often features jumps, drops, rock gardens and other obstacles. Downhill bikes are heavier and stronger than other mountain bikes and feature front
and rear suspension with over 8 inches (200mm) or (20cm) of travel, to glide quickly over rocks and tree roots.
</p>
</div>
</div><!-- end row -->
</div>
</body>
</body>
</html>
If you want horizontal align, you need same height, id est, you need to force the same height.
for example
.my-div{
height: 400px;
}
If you add the class my-div, in divs, class="col-sm-6 col-md-4 my-div"you can get the desired result, if the height of elements are less then 400px...
You can set the heights of all divs, using the next javascript + dom code (for example):
function set_max_height (){
var div = document.getElementById("main-row"); // main-row is the parent div of the list...
if(!div) return ;
var divs= div.getElementsByTagName("div");
if(!divs) return;
var L = divs.length;
var maxHeight = 0;
for(var i=0; i<L; i++){
var mh = divs[i].offsetHeight;
if(mh > maxHeight) maxHeight = mh;
}
for(var i=0; i<L; i++){
divs[i].style.height = maxHeight.toString() + "px";
}
}
You can use this function in a "onload" event, or in
According to the image you provided for the sketch you want I think this is what you are looking for:
<div class="container">
<div class="row">
<div class="col-sm-2">
<h3>1Cross-country cycling</h3>
<p>Cross-country cycling is defined by the terrain on which it is performed. XC courses and trails consist of a mix of rough forest paths and singletrack (also referred to as doubletrack depending on width), smooth fireroads, and even paved paths connecting other trails. Riding or racing is also only deemed cross-country if the technical complexity of the trails is easy or moderate. Trails difficult even to experienced riders are more often dubbed "all-mountain", "freeride", or "downhill".</p>
</div>
<div class="col-sm-2">
<h3>2Mountain bike trials</h3>
<p>Trials riding is an extreme test of bicycle handling skills, over all kinds of obstacles, both natural and man-made. It now has a strong - though small - following worldwide, though it is still primarily a European sport. Skills taken from trials riding can be used practically on any bicycle for balance, for example controlled braking and track standing, or balancing on the bike without putting a foot down. Competition trial bikes are characterized by powerful brakes, wide handlebars, lightweight parts, single-speed low gearing, low tire pressures with a thick rear tire, distinctive frame geometry, and usually no seat.</p>
</div>
</div>
<div class="row">
<div class="col-sm-2">
<h3>3Enduro</h3>
<p>Enduro is a form of Mountain bike racing in which there is a number of timed downhill sections of trail, and a number of uphill transfer stages, which are not timed, but might have time limits to complete. It is a stage-race format where the winner is the rider who accumulates the lowest combined time from the various timed sections. Mountain bike enduro competitions typically take place over the course of 1 or 2 days, however, week-long enduro competitions do also exist.</p>
</div>
<div class="col-sm-2">
<h3>4Freeride </h3>
<p>The term freeriding was originally coined by snowboarders, meaning riding without a set course, goals or rules on natural terrain. In mountain biking, it is riding trail with the most creative line possible that includes style, amplitude, control, and speed.</p>
</div>
</div>
<div class="row">
<div class="col-sm-2">
<h3>5Dirt jumping</h3>
<p>Dirt jumping is one of the names given to the practice of riding bikes over cement type jumps of dirt or soil and becoming airborne. The idea is that after riding over the 'take off' the rider will become momentarily airborne, and aim to land on the 'landing'.</p>
</div>
<div class="col-sm-2">
<h3>6Downhill mountain biking (DH)</h3>
<p>
Downhill mountain biking (DH) is a genre of mountain biking practiced on steep, rough terrain that often features jumps, drops, rock gardens and other obstacles. Downhill bikes are heavier and stronger than other mountain bikes and feature front and rear suspension with over 8 inches (200mm) or (20cm) of travel, to glide quickly over rocks and tree roots.
</p>
</div>
</div>
</div>
I wanted the page to be as responsive as possible e.g. 3 cols for col-md, 2 for col-sm, and 1 for col-xs.
I used the script from Use jQuery/CSS to find the tallest of all elements to get the tallest height then set the height of the class to the tallest height.
$().ready(function() {
var maxHeight = 0;
$('.col-sm-6').each(function() {
maxHeight = maxHeight > $('.col-sm-6').height() ? maxHeight : $('.col-sm-6').height();
});
$('.col-sm-6').each(function() {
$('.col-sm-6').height(maxHeight);
});
console.log(maxHeight)
console.log("loaded")
})
Here's my solution in JSFiddle : https://jsfiddle.net/he4rtbr0ken/gcc3oxoj/9/
Related
My output is -
as you can see, i have two rows, row left has the heading with select your hero moment text and carousel and row right has an image of a player. currently the player is floating in that row. I want to show the image sticked at the bottom of my display in that row.
My html-
<img src="images/CV.png" width="100%" style="position: -webkit-sticky;
position:sticky;
bottom:0;" id="my" alt="" >
</div>
as you can see i have tried the sticky position solution but didnt work for me.
Please try the below code. Kindly change the width and height based on your need.
#my{
position: fixed;
left: 0;
bottom: 0;
width: 100px;
height:100px;
}
<div>
<p>
"Aeroplane" redirects here. For other uses, see Airplane (disambiguation) and Aeroplane (disambiguation).
North American P-51 Mustang, a World War II fighter aircraft
The first flight of an airplane, the Wright Flyer on December 17, 1903
An All Nippon Airways Boeing 777-300 taking off from New York JFK Airport
An airplane or aeroplane (informally plane) is a powered, fixed-wing aircraft that is propelled forward by thrust from a jet engine, propeller or rocket engine. Airplanes come in a variety of sizes, shapes, and wing configurations. The broad spectrum of uses for airplanes includes recreation, transportation of goods and people, military, and research. Worldwide, commercial aviation transports more than four billion passengers annually on airliners[1] and transports more than 200 billion tonne-kilometers[2] of cargo annually, which is less than 1% of the world's cargo movement.[3] Most airplanes are flown by a pilot on board the aircraft, but some are designed to be remotely or computer-controlled such as drones.
The Wright brothers invented and flew the first airplane in 1903, recognized as "the first sustained and controlled heavier-than-air powered flight".[4] They built on the works of George Cayley dating from 1799, when he set forth the concept of the modern airplane (and later built and flew models and successful passenger-carrying gliders).[5] Between 1867 and 1896, the German pioneer of human aviation Otto Lilienthal also studied heavier-than-air flight. Following its limited use in World War I, aircraft technology continued to develop. Airplanes had a presence in all the major battles of World War II. The first jet aircraft was the German Heinkel He 178 in 1939. The first jet airliner, the de Havilland Comet, was introduced in 1952. The Boeing 707, the first widely successful commercial jet, was in commercial service for more than 50 years, from 1958 to at least 2013.
</p>
<img src="https://homepages.cae.wisc.edu/~ece533/images/airplane.png" width="100%" id="my" alt="" >
</div>
I just built my first AWS Apache Server and uploaded my website from my school project. The site works in Dreamweaver. However on my Apache server only some of the images appear. They all have the same path and are contained in the same folder /var/www/html/images. Some appear as intended, others are a broken link. Any ideas why it's not working? To get css to load I had to move my css folder. With the images some work fine while others do not. They are roughly the same size files. This is the code for one of the non working images:
<img src="../images/heart_stone2.JPG" alt="Desert Jasper" class="list_photo">
Here is the whole page:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="../css/styles.css">
<!-- favicon code -->
<link rel="apple-touch-icon" sizes="180x180" href="../images/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="../images/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="../images/favicon-16x16.png">
<link rel="manifest" href="../images/site.webmanifest">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="theme-color" content="#ffffff">
<title>Rock list</title>
</head>
<body>
<h1>List of Rocks and Minerals</h1>
<figure>
<figcaption>Description of Jasper</figcaption>
<div class="bottom_mar"><img src="../images/heart_stone2.JPG" alt="Desert Jasper" class="list_photo"><p>Jasper is an opaque rock of virtually any color stemming from the mineral content of the original sediments or ash. Patterns arise during the consolidation process forming flow and depositional patterns in the original silica rich sediment or volcanic ash. Hydrothermal circulation is generally thought to be required in the formation of jasper.</p><p> Jasper can be modified by the diffusion of minerals along discontinuities providing the appearance of vegetative growth, i.e., dendritic. The original materials are often fractured and/or distorted, after deposition, into diverse patterns, which are later filled in with other colorful minerals. Weathering, with time, will create intensely colored superficial rinds.</p><p> The classification and naming of jasper varieties presents a challenge. Terms attributed to various well-defined materials includes the geographic locality where it is found, sometimes quite restricted such as "Bruneau" (a canyon) and "Lahontan" (a lake), rivers and even individual mountains; many are fanciful, such as "forest fire" or "rainbow", while others are descriptive, such as "autumn" or "porcelain". A few are designated by the place of origin such as a brown Egyptian or red African.</p></div>
<div class="clear"></div>
<figcaption>Description of Amethyst</figcaption>
<div class="bottom_mar"><img src="../images/amethyst2.jpg" alt="Uruguayan Amethyst" class="list_photo"><p>Amethyst was used as a gemstone by the ancient Egyptians and was largely employed in antiquity for intaglio engraved gems.</p><p>The Greeks believed amethyst gems could prevent intoxication, while medieval European soldiers wore amethyst amulets as protection in battle in the belief that amethysts heal people and keep them cool-headed. Beads of amethyst were found in Anglo-Saxon graves in England. Anglican bishops wear an episcopal ring often set with an amethyst, an allusion to the description of the Apostles as "not drunk" at Pentecost in Acts 2:15.</p><p>A large geode, or "amethyst-grotto", from near Santa Cruz in southern Brazil was presented at a 1902 exhibition in Düsseldorf, Germany.</p><p>In the 19th century, the color of amethyst was attributed to the presence of manganese. However, since it can be greatly altered and even discharged by heat, the color was believed by some authorities to be from an organic source. Ferric thiocyanate has been suggested, and sulfur was said to have been detected in the mineral.</p></div>
<div class="clear"></div>
<figcaption>Description of Siva Lingams</figcaption>
<div class="bottom_mar"><img src="../images/siva_lingams2.jpg" alt="Siva Lingams" class="list_photo"><p>All traditional lingams come from only one place in the entire world, the Narmada River in India, at Onkar, Mandhata, which is one of the country’s seven sacred holy sites. In this sacred place, lingams wash up on the banks of the river or are carefully brought up from the riverbed.</p><p>India has a long, dry period, and it is at this time, when the river is at its lowest, that the nearby residents go out to the banks of the Narmada and gently pull the stones from their resting places. The lingams are then polished by hand, using methods in accordance with Vedic tradition. Many believe that the lingams are already sacred when they are pulled from the river, but also that the energy given to each lingam during polishing makes it extra special.</p></div>
<div class="clear"></div>
<figcaption>Description of Desert Rose</figcaption>
<div class="bottom_mar"><img src="../images/desert_roses2.jpg" alt="Desert Roses" class="list_photo"><p>Desert rose is the colloquial name given to rose-like formations of crystal clusters of gypsum or baryte which include abundant sand grains. The 'petals' are crystals flattened on the c crystallographic axis, fanning open in radiating flattened crystal clusters.</p><p>The rosette crystal habit tends to occur when the crystals form in arid sandy conditions, such as the evaporation of a shallow salt basin. The crystals form a circular array of flat plates, giving the rock a shape similar to a rose blossom. Gypsum roses usually have better defined, sharper edges than baryte roses. Celestine and other bladed evaporite minerals may also form rosette clusters. They can appear either as a single rose-like bloom or as clusters of blooms, with most sizes ranging from pea sized to 4 inches (10 cm) in diameter.</p><p>The ambient sand that is incorporated into the crystal structure, or otherwise encrusts the crystals, varies with the local environment. If iron oxides are present, the rosettes take on a rusty tone.</p><p>The desert rose may also be known by the names: sand rose, rose rock, selenite rose, gypsum rose and baryte (barite) rose.</p><p>Rose rocks are found in Tunisia, Libya, Morocco, Algeria, Jordan, Saudi Arabia, Qatar, Egypt, the United Arab Emirates, Spain (Fuerteventura, Canary Islands; Canet de Mar, Catalonia; La Almarcha, Cuenca), Mongolia (Gobi), Germany (Rockenberg), the United States (central Oklahoma; Cochise County, Arizona; Texas), Mexico (Ciudad Juárez, Chihuahua), Australia, South Africa and Namibia.</p></div>
<div class="clear"></div>
<figcaption>Description of Aragonite</figcaption>
<div class="bottom_mar"><img src="../images/aragonite2.jpg" alt="Aragonite" class="list_photo"><p>The type location for aragonite is Molina de Aragón in the Province of Guadalajara in Castilla-La Mancha, Spain, for which it was named in 1797. The mineral is not (as often assumed) named for the region of Aragon: Molina de Aragón is located in the historic region of Castile, albeit only 25 kilometers away from the border with Aragon. Aragonite is found in this locality as cyclic twins inside gypsum and marls of the Keuper facies of Triassic.[4] This type of aragonite deposits are very common in Spain, and there are also some in France and Morocco.</p><p>An aragonite cave, the Ochtinská Aragonite Cave, is situated in Slovakia. In the US, aragonite in the form of stalactites and "cave flowers" (anthodite) is known from Carlsbad Caverns and other caves. Massive deposits of oolitic aragonite sand are found on the seabed in the Bahamas.</p><p>Aragonite is the high pressure polymorph of calcium carbonate. As such, it occurs in high pressure metamorphic rocks such as those formed at subduction zones.</p></div>
<div class="clear"></div>
<figcaption>Description of Apophyllite</figcaption>
<div class="bottom_mar"><img src="../images/aphopholite2.jpg" alt="Aphopholite" class="list_photo"><p>The name apophyllite refers to a specific group of phyllosilicates, a class of minerals. Originally, the group name referred to a specific mineral, but was redefined in 1978 to stand for a class of minerals of similar chemical makeup that comprise a solid solution series, and includes the members fluorapophyllite-(K), fluorapophyllite-(Na), hydroxyapophyllite-(K). The name apophyllite is derived from the Greek ἀποφυλλίζω apophylliso, meaning "it flakes off", a reference to this class's tendency to flake apart when heated, due to water loss. These minerals are typically found as secondary minerals in vesicles in basalt or other volcanic rocks. A recent change (2008) in the nomenclature system used for this group was approved by the International Mineralogical Association, removing the prefixes from the species names and using suffixes to designate the species. A subsequent nomenclature change approved by the International Mineralogical Association in 2013 renamed the minerals to include both suffixes and prefixes, as shown above.</p><p>Though relatively unfamiliar to the general public, apophyllites are fairly prevalent around the world, with specimens coming from some of the world's most well-known mineral localities. These localities include: Jalgaon, India; the Harz Mountains of Germany, Mont Saint-Hilaire in Canada, and Kongsberg, Norway, with other locations in Scotland, Ireland, Brazil, Japan, and throughout the United States.</p></div>
<div class="clear"></div>
<figcaption>Description of Calcite</figcaption>
<div class="bottom_mar"><img src="../images/calcite2.jpg" alt="Orange Banded Calcite" class="list_photo"><p>Ancient Egyptians carved many items out of calcite, relating it to their goddess Bast, whose name contributed to the term alabaster because of the close association. Many other cultures have used the material for similar carved objects and applications.</p><p>High-grade optical calcite was used in World War II for gun sights, specifically in bomb sights and anti-aircraft weaponry.[13] Also, experiments have been conducted to use calcite for a cloak of invisibility.</p><p>Calcite is a common constituent of sedimentary rocks, limestone in particular, much of which is formed from the shells of dead marine organisms. Approximately 10% of sedimentary rock is limestone. It is the primary mineral in metamorphic marble. It also occurs in deposits from hot springs as a vein mineral; in caverns as stalactites and stalagmites; and in volcanic or mantle-derived rocks such as carbonatites, kimberlites, or rarely in peridotites.</p><p>Calcite is often the primary constituent of the shells of marine organisms, e.g., plankton (such as coccoliths and planktic foraminifera), the hard parts of red algae, some sponges, brachiopods, echinoderms, some serpulids, most bryozoa, and parts of the shells of some bivalves (such as oysters and rudists). Calcite is found in spectacular form in the Snowy River Cave of New Mexico as mentioned above, where microorganisms are credited with natural formations. Trilobites, which became extinct a quarter billion years ago, had unique compound eyes that used clear calcite crystals to form the lenses.</p><p>The largest documented single crystal of calcite originated from Iceland, measured 7×7×2 m and 6×6×3 m and weighed about 250 tons.</p></div>
<div class="clear"></div>
<figcaption>Description of Spirit Quartz</figcaption>
<div class="bottom_mar"><img src="../images/spirit_quartz2.jpg" alt="Spirit Quartz" class="list_photo"><p>Spirit Quartz is an unusual member of the Quartz family - a community within a stone. Its core, a larger, candle-shaped crystal with a faceted termination point, is encrusted with hundreds of smaller crystal termination points. Also referred to as Cactus Quartz or Porcupine Quartz, it is found only in the Magaliesberg Mountain region of South Africa, first appearing around 2001. Most Spirit Quartz is Amethyst, though Citrine, Smokey, and White Quartz are also mined.</p><p>The word "quartz" is derived from the German word "Quarz", which had the same form in the first half of the 14th century in Middle High German in East Central German[8] and which came from the Polish dialect term kwardy, which corresponds to the Czech term tvrdý ("hard").</p><p>The Ancient Greeks referred to quartz as κρύσταλλος (krustallos) derived from the Ancient Greek κρύος (kruos) meaning "icy cold", because some philosophers (including Theophrastus) apparently believed the mineral to be a form of supercooled ice.[10] Today, the term rock crystal is sometimes used as an alternative name for the purest form of quartz.</p></div>
<div class="clear"></div>
<figcaption>Description of Moldavite</figcaption>
<div class="bottom_mar"><img src="../images/moldavite2.jpg" alt="Moldavite" class="list_photo"><p>Moldavite is a forest green, olive green or blue greenish vitreous silica projectile rock formed by a meteorite impact probably in southern Germany (Nördlinger Ries Crater)[3] that occurred about 15 million years ago. It is a type of tektite.</p><p>Moldavite was introduced to the scientific public for the first time in 1786 as "chrysolites" from Týn nad Vltavou in a lecture by Josef Mayer of Prague University, read at a meeting of the Bohemian Scientific Society (Mayer 1788). Zippe (1836) first used the term "Moldavite", derived from the Moldau (Vltava) river in Bohemia (the Czech Republic), from where the first described pieces came.</p><p>In 1900, F. E. Suess pointed out that the gravel-size moldavites exhibited curious pittings and wrinkles on the surface, which could not be due to the action of water, but resembled the characteristic markings on many meteorites. He attributed the material to a cosmic origin and regarded moldavites as a special type of meteorite for which he proposed the name of tektite. Because of their difficult fusibility, extremely low water content, and chemical composition, the current consensus among earth scientists is that moldavites were formed about 14.7 million years ago during the impact of a giant meteorite in the present-day Nördlinger Ries crater. Splatters of material that was melted by the impact cooled while they were actually airborne and most fell in Bohemia. Currently, moldavites have been found in an area that includes southern Bohemia, western Moravia, the Cheb Basin (northwest Bohemia), Lusatia (Germany), and Waldviertel (Austria). Isotope analysis of samples of moldavites have shown a beryllium-10 isotope composition similar to the composition of Australasian tektites (australites) and Ivory Coast tektites (ivorites).</p></div>
</figure>
<!-- links to local webpages -->
<nav>
<ul>
<li>Home Page</li>
<li>Rock List</li>
<li>Rock Images</li>
<li>Comments</li>
<li>Links</li>
<li>Email Me</li>
</ul>
</nav>
</body>
</html>
I found that the file extension on some of the pictures was capitalized. These pictures wouldn't load until I changed .JPG to .jpg.
hi so iv been writing html for a website and was wondering if there is anyway someone could help me im trying to get my 2 sections " early history" and " european adoption" side by side above " modern cards " any recommendations? i dont know how to position them like this any help would be greatly appreciated
<!DOCTYPE html>
<html>
<head>
<title>History</title>
<link rel="stylesheet" type="text/css" href="../CSS/styles.css">
<style>
section {
margin: 10px
}
</style>
</head>
<body>
<!-- Page Header -->
<header>
<img class="imageBannerLeft" src="../images/bannerCardsLeft.png">
<img class="imageBannerRight" src="../images/bannerCardsRight.png">
<h1>Playing Cards</h1>
</header>
<!-- Navigation Bar -->
<nav>
<ul>
<li>Home</li>
<li>History</li>
<li>Multi-player</li>
<li>Single-player</li>
<li>Free Cards</li>
</ul>
</nav>
<!-- The main content of the page -->
<main>
<section>
<h2>Early history</h2>
<p>The first playing cards are recorded as being invented in China around the 9th century AD by the Tang dynasty author Su E who writes about the card game "leaf" in the text Collection of Miscellanea at Duyang. The text describes Princess Tongchang,
daughter of Emperor Yizong of Tang, playing leaf in 868AD with members of the family of the princess' husband.</p>
<p>The mass production of Cards became possible following the invention of wooden printing block technology. Early Chinese packs contained 30 cards with no suits.</p>
<p>The first cards may have doubled as actual paper currency being both the tools of gaming and the stakes being played for. This is similar to modern trading card games. Using paper money was inconvenient and risky so they were substituted by play
money known as "money cards".</p>
<p>The earliest dated instance of a game involving cards with suits and numerals occurred on 17 July 1294.</p>
</section>
<section>
<h2>European Adoption</h2>
<p>The first four-suited playing cards appeared in Europe in 1365. They are thought to originate from traditional latin decks whose suits included: cups, coins, swords, and polo-sticks. As Polo was not yet a European game, polo sticks became batons
(or cudgels). Wide use of playing cards is recorded from 1377 onwards.</p>
<p>Professional card makers in Ulm, Nuremberg, and Augsburg created printed decks. Playing cards even competed with devotional images as the most common uses for woodcuts in this period. These 15th-century playing cards were probably painted.</p>
<p>The Flemish Hunting Deck, held by the Metropolitan Museum of Art is the oldest complete set of ordinary playing cards made in Europe.</p>
<p>Cards were adapted in Europe to contain members of the royal court and by the 15th Century French and English packs of 56 cards contain the King, Queen and Knave cards.</p>
</section>
<section>
<img class="imageCardsRight" src="../images/germanPlayingCards.jpg">
<h2>Modern Cards</h2>
<p>Contemporary playing cards are grouped into three broad categories based on the suits they use: French, Latin, and Germanic. Latin suits are used in the closely related Spanish and Italian formats. The Swiss-German suits are distinct enough to merit
their subcategory. Excluding Jokers and Tarot trumps, the French 52-card deck preserves the number of cards in the original Mamluk deck, while Latin and Germanic decks average fewer.</p>
<p>Within suits, there are regional or national variations called "standard patterns" because they are in the public domain, allowing multiple card manufacturers to copy them. Pattern differences are most easily found in the face cards but the number
of cards per deck, the use of numeric indices, or even minor shape and arrangement differences of the pips can be used to distinguish them. Some patterns have been around for hundreds of years. Jokers are not part of any pattern as they are a
relatively recent invention and lack any standardized appearance so each publisher usually puts their own trademarked illustration into their decks. </p>
</section>
</main>
<!-- Page Footer -->
<footer>
<p> © Card Foundation <br> 2017 <br> Please provide feedback to: jlongridge#jlinternet.co.uk </p>
</footer>
</body>
</html>
Add a class to the first two sections and assign these rules to it:
.myClass {
display: inline-block;
width: 50%;
}
This will put them next to each other. Of course, if there are other factors that influence their width, you have to take that into account (and, for example, reduce the width accordingly)
You're looking for something along this lines, I think:
<!DOCTYPE html>
<html>
<head>
<title>History</title>
<style>
#parent {
float: left;
}
#parent section {
width: 45%;
float: left;
margin:10px
}
</style>
</head>
<body>
<!-- Page Header -->
<header>
<img class="imageBannerLeft" src="../images/bannerCardsLeft.png">
<img class="imageBannerRight" src="../images/bannerCardsRight.png">
<h1>Playing Cards</h1>
</header>
<!-- Navigation Bar -->
<nav>
<ul>
<li>Home</li>
<li>History</li>
<li>Multi-player</li>
<li>Single-player</li>
<li>Free Cards</li>
</ul>
</nav>
<!-- The main content of the page -->
<main>
<section id="parent">
<section>
<h2>Early history</h2>
<p>The first playing cards are recorded as being invented in China around the 9th century AD by the Tang dynasty author Su E who writes about the card game "leaf" in the text Collection of Miscellanea at Duyang. The text describes Princess Tongchang,
daughter of Emperor Yizong of Tang, playing leaf in 868AD with members of the family of the princess' husband.</p>
<p>The mass production of Cards became possible following the invention of wooden printing block technology. Early Chinese packs contained 30 cards with no suits.</p>
<p>The first cards may have doubled as actual paper currency being both the tools of gaming and the stakes being played for. This is similar to modern trading card games. Using paper money was inconvenient and risky so they were substituted by
play money known as "money cards".</p>
<p>The earliest dated instance of a game involving cards with suits and numerals occurred on 17 July 1294.</p>
</section>
<section>
<h2>European Adoption</h2>
<p>The first four-suited playing cards appeared in Europe in 1365. They are thought to originate from traditional latin decks whose suits included: cups, coins, swords, and polo-sticks. As Polo was not yet a European game, polo sticks became batons
(or cudgels). Wide use of playing cards is recorded from 1377 onwards.</p>
<p>Professional card makers in Ulm, Nuremberg, and Augsburg created printed decks. Playing cards even competed with devotional images as the most common uses for woodcuts in this period. These 15th-century playing cards were probably painted.</p>
<p>The Flemish Hunting Deck, held by the Metropolitan Museum of Art is the oldest complete set of ordinary playing cards made in Europe.</p>
<p>Cards were adapted in Europe to contain members of the royal court and by the 15th Century French and English packs of 56 cards contain the King, Queen and Knave cards.</p>
</section>
</section>
<section>
<img class="imageCardsRight" src="../images/germanPlayingCards.jpg">
<h2>Modern Cards</h2>
<p>Contemporary playing cards are grouped into three broad categories based on the suits they use: French, Latin, and Germanic. Latin suits are used in the closely related Spanish and Italian formats. The Swiss-German suits are distinct enough to
merit their subcategory. Excluding Jokers and Tarot trumps, the French 52-card deck preserves the number of cards in the original Mamluk deck, while Latin and Germanic decks average fewer.</p>
<p>Within suits, there are regional or national variations called "standard patterns" because they are in the public domain, allowing multiple card manufacturers to copy them. Pattern differences are most easily found in the face cards but the number
of cards per deck, the use of numeric indices, or even minor shape and arrangement differences of the pips can be used to distinguish them. Some patterns have been around for hundreds of years. Jokers are not part of any pattern as they are
a relatively recent invention and lack any standardized appearance so each publisher usually puts their own trademarked illustration into their decks. </p>
</section>
</main>
<!-- Page Footer -->
<footer>
<p> © Card Foundation <br> 2017 <br> Please provide feedback to: jlongridge#jlinternet.co.uk </p>
</footer>
</body>
</html>
I've wrapped your sections in another section (parent) and just adapted the CSS code a little bit.
I've put width:45% so you can keep your margin:10px. Otherwise I would probably have set width:50%
Try using display:flex; on parent div
main {
display: flex;
width: 100%;
}
<!DOCTYPE html>
<html>
<head>
<title>History</title>
<link rel="stylesheet" type="text/css" href="../CSS/styles.css">
</head>
<body>
<!-- Page Header -->
<header>
<img class="imageBannerLeft" src="../images/bannerCardsLeft.png">
<img class="imageBannerRight" src="../images/bannerCardsRight.png">
<h1>Playing Cards</h1>
</header>
<!-- Navigation Bar -->
<nav>
<ul>
<li>Home</li>
<li>History</li>
<li>Multi-player</li>
<li>Single-player</li>
<li>Free Cards</li>
</ul>
</nav>
<!-- The main content of the page -->
<main>
<section>
<h2>Early history</h2>
<p>The first playing cards are recorded as being invented in China around the 9th century AD by the Tang dynasty author Su E who writes about the card game "leaf" in the text Collection of Miscellanea at Duyang. The text describes Princess Tongchang,
daughter of Emperor Yizong of Tang, playing leaf in 868AD with members of the family of the princess' husband.</p>
<p>The mass production of Cards became possible following the invention of wooden printing block technology. Early Chinese packs contained 30 cards with no suits.</p>
<p>The first cards may have doubled as actual paper currency being both the tools of gaming and the stakes being played for. This is similar to modern trading card games. Using paper money was inconvenient and risky so they were substituted by play
money known as "money cards".</p>
<p>The earliest dated instance of a game involving cards with suits and numerals occurred on 17 July 1294.</p>
</section>
<section>
<h2>European Adoption</h2>
<p>The first four-suited playing cards appeared in Europe in 1365. They are thought to originate from traditional latin decks whose suits included: cups, coins, swords, and polo-sticks. As Polo was not yet a European game, polo sticks became batons
(or cudgels). Wide use of playing cards is recorded from 1377 onwards.</p>
<p>Professional card makers in Ulm, Nuremberg, and Augsburg created printed decks. Playing cards even competed with devotional images as the most common uses for woodcuts in this period. These 15th-century playing cards were probably painted.</p>
<p>The Flemish Hunting Deck, held by the Metropolitan Museum of Art is the oldest complete set of ordinary playing cards made in Europe.</p>
<p>Cards were adapted in Europe to contain members of the royal court and by the 15th Century French and English packs of 56 cards contain the King, Queen and Knave cards.</p>
</section>
</main>
<section>
<img class="imageCardsRight" src="../images/germanPlayingCards.jpg">
<h2>Modern Cards</h2>
<p>Contemporary playing cards are grouped into three broad categories based on the suits they use: French, Latin, and Germanic. Latin suits are used in the closely related Spanish and Italian formats. The Swiss-German suits are distinct enough to merit
their subcategory. Excluding Jokers and Tarot trumps, the French 52-card deck preserves the number of cards in the original Mamluk deck, while Latin and Germanic decks average fewer.</p>
<p>Within suits, there are regional or national variations called "standard patterns" because they are in the public domain, allowing multiple card manufacturers to copy them. Pattern differences are most easily found in the face cards but the number
of cards per deck, the use of numeric indices, or even minor shape and arrangement differences of the pips can be used to distinguish them. Some patterns have been around for hundreds of years. Jokers are not part of any pattern as they are a
relatively recent invention and lack any standardized appearance so each publisher usually puts their own trademarked illustration into their decks. </p>
</section>
<!-- Page Footer -->
<footer>
<p> © Card Foundation <br> 2017 <br> Please provide feedback to: jlongridge#jlinternet.co.uk </p>
</footer>
</body>
</html>
You could also try the css grid. It's very powerful in terms of building complex grid layout.
Documentation
.parentDiv {
display: grid;
}
.firstChild {
grid-column: 1;
background-color: yellow;
}
.secondChild {
grid-column: 2;
background-color: lime;
}
<div class="parentDiv">
<div class="firstChild">
Column 1
</div>
<div class="secondChild">
Column 2
</div>
</div>
This is a really weird issue and I'm 100% sure I'm closing my html correctly.
If I have more then two child divs, it'll escape the parent. Literally.
So this works:
<div class="info-box">
<div class="container">
<div class="info-title">Why would you buy Buy LoL Account?</div>
<div class="info-description">
Are you searching for an affordable high-quality League of Legends account? You’ve come to the right place.
We sell Smurf accounts with impressive rankings, from Diamond, Silver, Gold, and even Platinum but the big question
is why should you buy from us and not the other online sellers?
</div>
</div>
</div>
<div class="info-box">
<div class="container">
<div class="info-title">Buy LoL Smurfs Accounts</div>
A Smurf is an account owned by a player who has another level 30 account. The Smurf account is mainly used for training purposes against other more skilled opponents. We have Smurfs accounts already in level 30 so you won’t need to level them higher again. These will provide you with the quickest way to amass riot points and rise to level 30 in League of Legends. When you buy Smurfs account from us, it will be delivered instantly with all the necessary instructions.
</div>
</div>
</div>
However if I add one more:
<div class="info-box">
<div class="container">
<div class="info-title">Why would you buy Buy LoL Account?</div>
<div class="info-description">
Are you searching for an affordable high-quality League of Legends account? You’ve come to the right place.
We sell Smurf accounts with impressive rankings, from Diamond, Silver, Gold, and even Platinum but the big question
is why should you buy from us and not the other online sellers?
</div>
</div>
</div>
<div class="info-box">
<div class="container">
<div class="info-title">Buy LoL Smurfs Accounts</div>
A Smurf is an account owned by a player who has another level 30 account. The Smurf account is mainly used for training purposes against other more skilled opponents. We have Smurfs accounts already in level 30 so you won’t need to level them higher again. These will provide you with the quickest way to amass riot points and rise to level 30 in League of Legends. When you buy Smurfs account from us, it will be delivered instantly with all the necessary instructions.
</div>
</div>
</div>
<div class="info-box">
<div class="container">
<div class="info-title">Buy LoL Smurfs Accounts</div>
A Smurf is an account owned by a player who has another level 30 account. The Smurf account is mainly used for training purposes against other more skilled opponents. We have Smurfs accounts already in level 30 so you won’t need to level them higher again. These will provide you with the quickest way to amass riot points and rise to level 30 in League of Legends. When you buy Smurfs account from us, it will be delivered instantly with all the necessary instructions.
</div>
</div>
</div>
I get this:
But it does not look like that in my editor:
<div class="info-container">
<div class="info-box">
<div class="container">
<div class="info-title">Why would you buy Buy LoL Account?</div>
<div class="info-description">
Are you searching for an affordable high-quality League of Legends account? You’ve come to the right place.
We sell Smurf accounts with impressive rankings, from Diamond, Silver, Gold, and even Platinum but the big question
is why should you buy from us and not the other online sellers?
</div>
</div>
</div>
<div class="info-box">
<div class="container">
<div class="info-title">Buy LoL Smurfs Accounts</div>
A Smurf is an account owned by a player who has another level 30 account. The Smurf account is mainly used for training purposes against other more skilled opponents. We have Smurfs accounts already in level 30 so you won’t need to level them higher again. These will provide you with the quickest way to amass riot points and rise to level 30 in League of Legends. When you buy Smurfs account from us, it will be delivered instantly with all the necessary instructions.
</div>
</div>
</div>
<div class="info-box">
<div class="container">
<div class="info-title">Get a Ready-Made League of Legends Lvl 30 Account</div>
<div class="info-description">
If you are interested in having your own already developed League of Legends lvl 30 account, then you are in the right place. A level 30 they comes with numerous benefits. If you are a new player, you’ll begin at level 1, which is limited in the number of Champions, summoner spells, masteries, runes, and game modes you have. It’s a very boring level to start from. As you continue playing, you gradually unlock more game features but truth be told, it can take a really long time to unlock the most critical features. You need to reach level 30 to unlock features that allow you to play ranked matches, which are where all the fun in LoL is found. We provide you with a faster way to get to this level. Simply buy a level 30 account and begin playing those exciting ranked matches right away. You don’t need to spend months trying to level up.
</div>
</div>
</div>
<div class="info-box">
<div class="container">
<div class="info-title">The Difference Between Unranked and Ranked Accounts</div>
<div class="info-description">
The major difference between an unranked and a ranked League of Legends account can be described as the difference between playing a normal casual game and playing a highly competitive game. Ranked matches are more exciting and highly competitive than unranked accounts, adding fun and enjoyment to the game. You cannot play a ranked game until you have a level 30 summoner, Ranked BlazingBoost, and 16 Champions. We have ranked accounts that are ready for competitive matches. With our already developed level 30 League of Legends account, you can begin playing exciting ranked matches immediately.
</div>
</div>
</div>
<div class="info-box">
<div class="container">
<div class="info-title">Get NA or EUW Accounts</div>
<div class="info-description">
You can buy a LoL account from us regardless of your location. We sell uranked accounts for different geographic regions including North America and EUW. Players from the US and Canada are usually connected via the NA server while their European counterparts connect via the EUW server.
We have both ranked and unranked accounts for different regions. They are all safe accounts that you can use without fear of running into a sudden ban. We also provide safe payment processing and instant delivery for accounts in every region worldwide.
</div>
</div>
</div>
</div>
What am I doing wrong here?
There is an extra </div> in your code which is because you haven't add <div class="info-description"> for the second and third child nodes, try this:
<div class="info-container">
<div class="info-box">
<div class="container">
<div class="info-title">Why would you buy Buy LoL Account?</div>
<div class="info-description">
Are you searching for an affordable high-quality League of Legends account? You’ve come to the right place.
We sell Smurf accounts with impressive rankings, from Diamond, Silver, Gold, and even Platinum but the big question
is why should you buy from us and not the other online sellers?
</div>
</div>
</div>
<div class="info-box">
<div class="container">
<div class="info-title">Buy LoL Smurfs Accounts</div>
<div class="info-description">
A Smurf is an account owned by a player who has another level 30 account. The Smurf account is mainly used for training purposes against other more skilled opponents. We have Smurfs accounts already in level 30 so you won’t need to level them higher again. These will provide you with the quickest way to amass riot points and rise to level 30 in League of Legends. When you buy Smurfs account from us, it will be delivered instantly with all the necessary instructions.
</div>
</div>
</div>
<div class="info-box">
<div class="container">
<div class="info-title">Buy LoL Smurfs Accounts</div>
<div class="info-description">
A Smurf is an account owned by a player who has another level 30 account. The Smurf account is mainly used for training purposes against other more skilled opponents. We have Smurfs accounts already in level 30 so you won’t need to level them higher again. These will provide you with the quickest way to amass riot points and rise to level 30 in League of Legends. When you buy Smurfs account from us, it will be delivered instantly with all the necessary instructions.
</div>
</div>
</div>
</div>
to avoid such problems try using IDEs they have basic functionalities to check correctness of the HTML.
As you can see here:
My content has a large white space. My content HTML is below. Not sure why it isn't aligning properly and has a large whitespace. Makes no sense. I'm using col-lg-6 an col-md-6, so it should do half & half all the time.
Any ideas?
<div class="tab-pane active" id="specification">
<ul class="productinfo">
<div class="col-lg-6 col-md-6">
<h3>Specs</h3>
<ul class="unstyled listoption5"><li>Single bag holds approx. 20 gallons of water. </li><li>Fits mininum 1 inch tree trunk up to a maximum 4 inch tree trunk (Zip 2 bags together to water 5 to 8 inch trees/2 bags=about 40 gallon setup) </li><li>Made of green polyethylene with nylon webbing, black polypro straps and green nylon zippers. </li><li>UV treated to withstand exposure to sunlight. </li><li>2 drip hole locations per bag-Standard drip time of 5 to 9 hours. </li><li>Fill opening fits up to 3" diameter hose.</li><li>Filled with water: 30" Tall x 18" Wide (at base)</li></ul>
</div>
<div class="col-lg-6 col-md-6">
<h3>Product Features</h3>
<ul class="unstyled listoption5">DIRECTIONS FOR USE: <li>Place on tree trunk, with the zippers on the uphill side of the tree. </li><li>Wrap both sides around trunk (1" to 4" dia. trunk*) until zippers meet. </li><li>Two 20 gal. bags zipped together back-to-back - Fits 5 to 8" dia. trunk </li><li>Zip sides of bag together from bottom to top. </li><li>Lift tag to expose fill opening at top of bag. </li><li>Insert hose into fill opening and begin filling with water. </li><li>Fill bag to 1/4 capacity, then gently lift up on straps at top of bag to
</li></ul></div>
<div class="col-lg-6 col-md-6">
<h3>Product Benefits</h3>
<ul class="unstyled listoption5"><li>No more guess work- Provides a professional watering every time. </li><li>Reduces watering frequency-Fill just once a week for most new tree plantings. </li><li>Reduces the amount of time spent at tree- Setup and fill in less than 5 minutes. </li><li>Saves water resources- 100% water absorption with little or no run-off. </li><li>Deep water penetration with each application- Promotes deep root growth and reduces transplant shock.</li></ul>
</div>
<div class="col-lg-6 col-md-6">
<h3>Warranty</h3>
5 Year limited manufacturer warranty from the date of purchase against defects in materials and workmanship.
</div>
<div class="col-lg-6 col-md-6">
<h3>Links</h3>
<a target="_blank" href="http://www.treegator.com/products/specs/TreegatorOrig_SpecSheet.pdf">Spec Sheet</a><br>Additional Product Specifications & Handling Precautions<br><a target="_blank" href="http://www.treegator.com/products/original/index.html">Double Bag Set Up</a>
</div>
<div class="col-lg-6 col-md-6">
<h3>Application Rates</h3>
Failure to Follow Handling Procedures May Void Manufacturer's Warranty - Do not hang and/or suspend bag from straps. - Before use, remove all sharp objects from area to be irrigated. - Use clean water only. If necessary, filter water through cotton cloth on hose end. - Do not unzip bag when full. - Do not tear or rip fill opening. - Treegator® is not a toy - Keep away from children. - If using water soluble fertilizers, be sure to pre-mix in a separate container before adding mixture to bag. - Treegator® is designed for use on mulch. Failure to do so can result in clogging of drip holes.
</div>
</ul>
</div>
Use the following code around every 2 columns:
<div class="row">...</div>
This will fix the layout, example: http://www.bootply.com/t8m0BopAkO