CODEWITHSUNDEEP
htmlcsslayout
keronconk
keronconk

Reputation: 359

html css layout zoom drastic change

I have something to ask about html css

I have layout that I want to achieve like picture 1 below

example1

But, if it zoomed in several percentage, it becomes like picture 2 below example2

what I want is, it stable like picture 1 in any zoom

Here is the code

body {
  background-color: #430600;
  width: 1280px;
  margin: 0 auto;
  align-content: center;
  padding: 0;
}

header {
  position: fixed;
  width: 100%;
  z-index: 15;
}

main {
  float: left;
  margin-top: 120px;
}

h1 {
  color: white;
  text-align: center;
  font-style: italic;
  z-index: 10;
}


h2 {
  color: white;
  text-align: center;
}

#section-banner {
  
}

#section-banner h2 {
  position: absolute;
  text-align: center;
  top: 300px;
  left: 0;
  width: 100%;
  transform: translateY(-50%);
  color: white;
  font-size: 5em;
  font-style: italic;
  z-index: 1;
}

#section-aboutus-1 {
  color: white;
  margin-top: 50px;
  text-align: center;
}

#aboutus-1 {
  float:left;
}

#aboutus-table {
  float:left;
}

#aboutus-image-1 {
  float:left;
  width: 50%;
}

#aboutus-detail-1 {
  float: right;
  width: 45%;
  text-align: center;
  font-size: 1.4em;
  margin: 50px 20px 50px 20px;
  display: inline-block;
}

#aboutus-detail-2 {
  float:left;
  width: 45%;
  text-align: center;
  font-size: 1.4em;
  margin: 75px 20px 50px 20px;
  display: inline-block;
}

#aboutus-image-2 {
  float:right;
  width: 49%;
}

#aboutus-detail-3 {
  margin: 50px 150px 50px 150px;
  float:left;
}
<html>
<head>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8">
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">		
	<link rel='stylesheet' href='index.css?ver=1.0' media='all' />
  
</head>

<body>
		<section id="section-aboutus-1">
      <div id="aboutus-image-1">
        <img src="https://i.sstatic.net/jDg7r.jpg" alt="" />
      </div>
      <div id="aboutus-detail-1">        
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et lectus tincidunt, sollicitudin odio vitae, pretium odio. 
				<br><br>
				Nam tincidunt ornare dolor vitae porttitor. Sed interdum velit sapien, in pharetra velit efficitur sit amet. Aliquam erat volutpat. 
				<br><br>
				Cras in consectetur sem. Curabitur ac velit nibh. Donec ut lectus tellus. Mauris sit amet dignissim eros, imperdiet auctor orci. 
				<br><br>
				In hac habitasse platea dictumst. Nulla finibus nulla ut auctor dapibus. Duis ultricies erat sagittis metus gravida, accumsan laoreet libero tempus. In at semper nisl. 
      </div>


      <div id="aboutus-detail-2">
        
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et lectus tincidunt, sollicitudin odio vitae, pretium odio. 
				<br><br>
				Nam tincidunt ornare dolor vitae porttitor. Sed interdum velit sapien, in pharetra velit efficitur sit amet. Aliquam erat volutpat. 
				<br><br>
				Cras in consectetur sem. Curabitur ac velit nibh. Donec ut lectus tellus. Mauris sit amet dignissim eros, imperdiet auctor orci. 
				<br><br>
				In hac habitasse platea dictumst. Nulla finibus nulla ut auctor dapibus. Duis ultricies erat sagittis metus gravida, accumsan laoreet libero tempus. In at semper nisl. 
      </div>
      <div id="aboutus-image-2">
        <img class="image" src="https://i.sstatic.net/6EScx.jpg" alt="" />
      </div>


      <div id="aboutus-detail-3">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et lectus tincidunt, sollicitudin odio vitae, pretium odio. 
				<br><br>
				Nam tincidunt ornare dolor vitae porttitor. Sed interdum velit sapien, in pharetra velit efficitur sit amet. Aliquam erat volutpat. 
				<br><br>
				Cras in consectetur sem. Curabitur ac velit nibh. Donec ut lectus tellus. Mauris sit amet dignissim eros, imperdiet auctor orci. 
				<br><br>
				In hac habitasse platea dictumst. Nulla finibus nulla ut auctor dapibus. Duis ultricies erat sagittis metus gravida, accumsan laoreet libero tempus. In at semper nisl. 
      </div>
      
    </section>
	</body>
</html>

Any help appreciated

Upvotes: 0

Views: 36

Answers (2)

Cameron
Cameron

Reputation: 554

would you be interested in using a responsive framework like bootstrap? https://jsfiddle.net/audetcameron/ggdz2Lnj/ just a quick example

<body style="background:#430600; color:#ffffff">
     <div class="container">
      <div class="row">
       <div class="col-xs-6">
           <div id="aboutus-image-1">
            <img src="https://i.sstatic.net/jDg7r.jpg" alt="" class="img-responsive"/>
          </div>
       </div>
       <div class="col-xs-6">
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et lectus tincidunt, sollicitudin odio vitae, pretium odio. 
    Nam tincidunt ornare dolor vitae porttitor. Sed interdum velit sapien, in pharetra velit efficitur sit amet. Aliquam erat volutpat. 
    Cras in consectetur sem. Curabitur ac velit nibh. Donec ut lectus tellus. Mauris sit amet dignissim eros, imperdiet auctor orci. 

    In hac habitasse platea dictumst. Nulla finibus nulla ut auctor dapibus. Duis ultricies erat sagittis metus gravida, accumsan laoreet libero tempus. In at semper nisl.</p>
       </div>
      </div>
      <div class="row">
        <div class="col-xs-6">
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et lectus tincidunt, sollicitudin odio vitae, pretium odio. 
    Nam tincidunt ornare dolor vitae porttitor. Sed interdum velit sapien, in pharetra velit efficitur sit amet. Aliquam erat volutpat. 
    Cras in consectetur sem. Curabitur ac velit nibh. Donec ut lectus tellus. Mauris sit amet dignissim eros, imperdiet auctor orci. 
    In hac habitasse platea dictumst. Nulla finibus nulla ut auctor dapibus. Duis ultricies erat sagittis metus gravida, accumsan laoreet libero tempus. In at semper nisl.</p>      
        </div>
        <div class="col-xs-6">
             <div id="aboutus-image-2">
            <img class="image" src="https://i.sstatic.net/6EScx.jpg" alt="" class="img-responsive"/>
          </div>  
        </div>
      </div>
    </div> 
    </body>

Upvotes: 0

SpaceDogCS
SpaceDogCS

Reputation: 2968

First, you should improve this HTML code, separating block.

You should put #aboutus-detail-1 and #aboutus-image-1 in a separeted div and in CSS you say:

float: left;
width: 100%;

for those two new divs.

The same for the others #aboutus

Upvotes: 1

Related Questions