CODEWITHSUNDEEP
htmlcss
drew
drew

Reputation: 11

How to place few pictures in different columns in html and css?

@import url('https://fonts.googleapis.com/css?family=Squada+One|Titillium+Web:400,700');

/*
font-family: 'Titillium Web', sans-serif;
font-family: 'Squada One', cursive;
*/

* {
    margin: 0;
    padding: 0;
    
    box-sizing: border-box;
}

#wrapper {
    margin: 0 auto 0 auto;
    
    width: 1000px;
    min-height: 200px;
}

header {
    padding: 0 10px 0 10px;
    
    width: 1000px;
    height: 65px;
    
    float: left;
    clear: both;
    
    background-color: #090504;
}

#logo {
    width: 500px;
    height: 65px;
    
    float: left;
}

h1 {
    font-family: 'Squada One', cursive;
    font-size: 57px;
    
    text-transform: uppercase;
    
    letter-spacing: 1px;
    
    color: white;
}

nav {
    width: 450px;
    height: 65px;
    
    float: right;
    
    text-align: right;
}

nav p {
    margin: 35px;
    
    font-family: 'Titillium Web', sans-serif;
    font-size: 11px;
    font-weight: 700;
    
    text-transform: uppercase;
    
    word-spacing: 35px;
    
    color: white;
}

#hero {
    width: 1000px;
    height: 473px;
    
    float: left;
    clear: both;
    
    background-image: url(../assets/background-hero.jpg);
    background-repeat: no-repeat;
}

#keymessage {
    margin: 110px 0 0 10px;
    /*top right bottom left*/
    
    widows: 500px;
    height: 200px;
    
    float: left;   
}

#keymessage h2 {
    font-family: 'Titillium Web', sans-serif;
    font-size: 36px;
    font-weight: 200;
    
    text-transform: uppercase;
    
    color: white;
}

#keymessage h3 {
    margin-top: -10px;
    margin-bottom: 10px;
    
    font-family: 'Titillium Web', sans-serif;
    font-size: 18px;
    font-weight: 200;
    
    text-transform: capitalize;
        
    color: white;
}

#keymessage p {
    margin-top: 50px;
    padding: 5px 7px 5px 7px;
    
    font-family: 'Titillium Web', sans-serif;
    font-size: 10px;
    font-weight: 400;
    
    text-transform: uppercase;
    
    color: white;
    
    background-color: #a31c1a;
    
    display: inline;
    
    border-radius: 5px;
    border: 1px solid white;
}

#featured {
    padding: 10px 0 0 10px;
    
    width: 1000px;
    height: 500px;
    
    float: left;
    clear: both;
}

.featured-item {
    margin: 40px 5px 0 0;
    
    width: 319px;
    height: 500px;
    
    float: left;
}

.featured-item h2 {
    font-family: 'Titillium Web', sans-serif;
    font-size: 16px;
    font-weight: 700px;
    
    text-transform: uppercase;
}

.featured-item p {
    margin-bottom: 10px;
    
    font-family: 'Titillium Web', sans-serif;
    font-size: 12px;
    font-weight: 400;
}

.featured-button {
    font-family: 'Titillium Web', sans-serif;
    font-size: 10px;
    font-weight: 200;
    
    padding: 2px 5px 2px 5px;
    
    color: white;
    
    text-transform: uppercase;
    
    background-color: #598527;
    
    display: inline;
    
    border-radius: 3px;
}

/* Three image containers (use 25% for four, and 50% for two, etc) */
.column {
  float: right;
  width: 25%;
  padding: 5px;
}
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Ozio Authentic Sushi</title>
        
        <link href="css/style.css" type="text/css" rel="stylesheet">
    </head>
    
    <body>
        <div id="wrapper">
            <header>
                <div id="logo">
                    <h1>Ozio Authentic Sushi</h1>
                </div> <!-- Logo ends -->
                
                <nav>
                    <p>Menu SPECIALS LOCATIONS CONTACT</p>
                </nav>
            </header>
            
            <section id="hero">
                <div id="keymessage">
                    <h2>Japanese Fusion Cuisine</h2>
                    <h3>Authentic &am; Traditionally Inspired Japanese Dishes</h3>
                    
                    <p>Try our New FALL Specialties ></p>
                </div> 
            </section> <!-- Hero ends -->
            
            <section id="featured">
                <div class="featured-item">
                    <p><img src="assets/featured-pumpkin_chipotle%20soup.jpg" width="319" height="158" alt="Seasonal Soups - Pumpkin Chipolete Soup"/> </p>
                    
                    <h2>Seasonal Soups</h2>
                            
                    <p>Ozio offers a collection of soups each fall that warm hands and make hearts happy. Each fall our sous-chef explore great locally grown flavours to bring the best combinations to awake your senses with our seasoning. (Pumpkin Chipotle Soup)</p>
                    
                    <p class="featured-button">More</p>
                </div> <!-- Seasonal Soups end -->
                
                <div class="featured-item">
                    <p><img src="assets/featured-maki_sushi.jpg" width="319" height="158" alt="Sushi - Maki SUshi"/> </p>
                    
                    <h2>Savoury Sushi</h2>
                    
                    <p>We have a wide selection of traditional sushi creations as well as creations unique to Ozio Authentic Sushi. We serve maki sushi for people who are becoming sushi lovers to hand-rolled temaki sushi for the more refined palette. </p>
                    
                    <p class="featured-button">More</p>
                </div> <!-- Savoury Sushi end -->
                
                <div class="featured-item">
                    <p><img src="assets/featured-udon.jpg" width="319" height="158" alt="Undeniable UDon"/> </p>
                    
                    <h2>Undeniable UDon</h2>
                    
                    <p>Enjoy a traditional taste of Japanese Udon noodles. We serve Fall Udon soups warm to heat up your taste buds during the cooler weather. Udon come in a number of pairing styles for both the meat lovers and veggitarians - the choice is all yours.</p>
                    
                    <p class="featured-button">More</p>
                </div> <!-- Undeniable UDon end -->
            </section> <!-- Featured ends -->
        
<!--
            <section id="gallery">
                <div class="gallery-pics">
                    <p><img src="assets/salad_bowl.jpg"></p>
                    <p><img src="assets/gravy_bowl.jpg"></p>
                    <p><img src="assets/orange_on_white.jpg"></p>
                </div>
            
            
            
            
            </section>
-->
            
            <div class="row">
              <div class="column">
                <img src="assets/gravy_bowl.jpg" alt="Gravy">
              </div>
              <div class="column">
                <img src="assets/two_bowls.jpg" alt="Bowls">
              </div>
              <div class="column">
                <img src="assets/salad_bowl.jpg" alt="Salad">
              </div>
            </div>
         
          
              <div class="column">
                <img src="assets/sushi.jpg" alt="Sushi">
              </div>
              <div class="column">
                <img src="assets/orange_on_white.jpg" alt="OrangeOnWhite">
              </div>
              <div class="column">
                <img src="assets/shrimp.jpg" alt="Shrimp">
              </div>
         
        
        
        
        </div>  <!-- Wrapper ends -->
    
    
    
    
    </body>
</html>

How my website looks like right now enter image description here

Okay so I want to make the sushi picture to be on the left side of the two bottom pictures which are on the bottom.

How can I do that in html and css? (I am trying to post my code for HTML and CSS but there is an error coming saying, your post contains appears to contain code that is properly not coded)

Upvotes: 0

Views: 113

Answers (1)

Nick
Nick

Reputation: 1422

The easiest way to do this would be to use width and padding to each be a percentage of the screen. For example, if you have 6 images and want 2 rows and 3 columns, you would want the width to be 30% with left and right padding of 1.66%. Each image with left and right padding would be 33.33% of the screen.

img {
    width: 30%;
	max-height: 100px;
	float: left;
	padding: 1.66%;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
	<img src="https://img.grouponcdn.com/deal/hfefAup1zQWBE2K8sWURgS27xax/hf-846x508/v1/c700x420.jpg">
	<img src="https://www.verywellhealth.com/thmb/6eCa_ReyK0zfrapJOXoVuD-boME=/768x0/filters:no_upscale():max_bytes(150000):strip_icc()/GettyImages-691112817-5a4eef095b6e240037fc6278.jpg">
	<img src="https://img.grouponcdn.com/bynder/Ri5HEhJFF4o6PFz5WCG2rrSNN4A/Ri-2048x1229/v1/c700x420.jpg">
	<img src="https://assets3.thrillist.com/v1/image/1559020/size/tmg-slideshow_l.jpg">
	<img src="https://media.fromthegrapevine.com/assets/images/2015/10/vegetarian-sushi-rolls.jpg.480x0_q71_crop-scale.jpg">
	<img src="https://images-gmi-pmc.edge-generalmills.com/d1584f73-4865-4b8b-b3e5-7f9ca741366f.jpg">
</body>
</html>

Upvotes: 1

Related Questions