CODEWITHSUNDEEP
htmlcss
Haziq Hussain
Haziq Hussain

Reputation: 11

How do I get a DIV box to fill the webpage and not go to the left?

I have a client's website that I am trying to fix... The booking page should have the address on the left and the contact form on the right and the white box should fill the webpage.

At the moment, the DIV box just aligns to the left and this means that the contact form and address are squashed together. What can I do? Here is the webpage

.box {
  background-color: white; /* for visualization purposes */
  display: inline-block;
  max-width: 100%;
  
}

.box2 {
  display: inline-block;
  padding: 20px 20px;
  max-width: 100%;
  
}
<div class="content">
		<div class="wrap">
			<div class="contact">
		<h1>Book an Appointment Online or via Telephone/Email:</h1>
		<div class="section group contact1">				
				<div class="col span_1_of_3">
      			<div class="company_address">
				     	<h3>Company Information:</h3>
						    	<p>BY APPOINTMENT ONLY</p>
						    	<p>Imani Skin Clinic,</p>
						   		<p>8-10 Sneyd Street</p>
								<p>Cobridge</p>
								<p>ST6 2NZ</p>
						   		<p>United Kingdom</p>
				   		<p>Phone:+447305585588</p>
				 	 	<p>Email: <span>[email protected]</span></p>
				   		<br />
						<br />
						<div id="share-buttons">
							
							<!-- Twitter -->
    <a href="https://twitter.com/imaniskinclinic" target="_blank">
        <img src="https://simplesharebuttons.com/images/somacro/twitter.png" alt="Twitter" />
    </a>
	
	<!-- Facebook -->
    <a href="http://www.facebook.com/imaniskinclinic" target="_blank">
        <img src="https://simplesharebuttons.com/images/somacro/facebook.png" alt="Facebook" />
    </a>
	
	<!-- Instagram -->
    <a href="http://www.instagram.com/imaniskinclinic" target="_blank">
        <img src="images/insta.jpg" alt="Instagram" />
    </a>
						
						</div>
					<br />
					<br />
						
				</div>
				
					<div id="contact"><a class="shedul-embed-button-link" style="overflow: visible; cursor: pointer; background: rgb(248,171,190); color: rgb(255, 255, 255); border: 0px; display: inline-block; outline: none; padding: 10px 15px; margin: 0px; font-family: Roboto, sans-serif; font-size: 16px; line-height: 16px; text-decoration: none; border-radius: 3px; -webkit-appearance: none; box-shadow: none;" href="https://www.fresha.com/providers/imani-skin-clinic-ltd-cgfhlxsq">Book Now</a><script>!function(e){var t="shedul-embed-button-loader",d="https:"===e.location.protocol?"https":"http",n=e.getElementsByTagName("head")[0];if(!e.getElementById(t)){var o=e.createElement("script"),p=e.createElement("style");o.id=t,o.src="https://app.shedul.com/embed_button.js".replace(/^\w+/,d),p.type="text/css",p.innerHTML=".shedul-widget-open { position: fixed; overflow:hidden; }",n.appendChild(o),n.appendChild(p)}}(document);</script></div>

				
				
	</div>
	

	
	<div class="col span_3_of_3">
				  <div class="contact-form">				  
                        
					<div id="zbwid-fbedad33"></div>    

                       
				    </div>
  				</div>

Upvotes: 0

Views: 47

Answers (3)

Shahjahan
Shahjahan

Reputation: 552

You've to do two things first give contact1 class to 100% width, though it's already there but syntax error. Put !important otherwise it will be overruled 

.contact1{ width: 100% !important }

Then div that contains col span_3_of_3 classes, give this div a class with floating point

.your-class-name{ float: right !important }

You are good to go

Sample Output

Upvotes: 1

vix
vix

Reputation: 1

Start by fixing your HTML to mark all needed elements - container (or wrapper) and contact box + address box inside it. Then you can float the contact box and address box to the left or right. Also your CSS is targeting 2 classes that do not exist in your HTML.

Upvotes: 0

Khurram Ishaque
Khurram Ishaque

Reputation: 798

For the class ".section", make width 100% instead of auto.

Above the div class="company_address", there is one div with class "col span_1_of_3", For ".span_1_of_3", increase width to 50%. And for ".col span_3_of_3", increase width to 30%, and set float: right. You may adjust the widths according to your needs and for responsive design.

Upvotes: 0

Related Questions