The first is a picture taking 50% of the web page and also the other would certainly be a text box taking the remaining 50% of the web page. No margins.

Is it feasible to have somepoint favor this that"s responsive? I"m struggling to obtain the background colour to line up through the picture.

You are watching: Image and text side by side html responsive


.imagebox width: 50%; float: left;.textbox width: 50%; float: right; text-align: center; padding-top: 20px; background-color: #666; color: #fff;

Title Here

Lorem ipamount dolor sit amet, consectetur adipiscing elit, sed carry out eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commoperform consequat.

Read More
*

Here the first fifty percent is an
*

#best content in tright here #ideal content in tbelow #appropriate content in tright here #ideal content in there #ideal content in tright here #ideal content in tright here #ideal content in tbelow #best content in there #right content in tbelow #right content in tright here
*

Wrap your .textbox inside a container (in my case the course of the container is .textbox-cont). Give imagebox and also textbox-cont a resolved elevation. Rerelocate floating home from textbox apply it to the .textbox-cont. Now position both the photo and the textbox loved one to the .imagebox and also .textbox-cont respectively.Use place absolute for img and .textbox and also place it 50% from the optimal of their container choose so:

.imagebox img position:absolute; top:50%; transform:translateY(-50%);.textbox background-color: #666; color: #fff; position:absolute; text-align: center; width:100%; top:50%; transform:translateY(-50%); This will do the trick. Also if you want to make it responsive usage media queries choose so:


media just display and also (max-width: 700px) .imagebox, .textbox-cont width:100%; height:200px; Play about with the breakallude (max-width) and adjust it to whatever suits you finest.Also adjust the box-sizing property of every facet to border-box like so to settle any type of margin or padding issue:

* box-sizing:border-box;Final snippet :


* box-sizing:border-box;.imagebox width: 50%; float: left; height:300px; position:relative;.imagebox img position:absolute; top:50%; transform:translateY(-50%); overflow:hidden;.textbox-cont width: 50%; height:300px; float: right; position:relative; overflow:hidden;.textbox background-color: #666; color: #fff; position:absolute; text-align: center; width:100%; padding:20px; top:50%; transform:translateY(-50%);

Title Here

Lorem ipamount dolor sit amet, consectetur adipiscing elit, sed perform eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Read More

if you desire to read around box-sizing:border-box examine this out => https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing

right here is a good short article on responsive webstyle :https://blog.froont.com/9-basic-principles-of-responsive-web-design/


Thanks for contributing a solution to Stack Overflow!

Please be certain to answer the question. Provide details and share your research!

But avoid

Asking for help, clarification, or responding to various other answers.Making statements based upon opinion; ago them up via recommendations or individual suffer.

See more: This Is Why Is Your Reflection Upside Down In A Spoon ? Why Is Reflection Upside Down In A Spoon

To learn even more, watch our tips on composing good answers.


Post Your Answer Discard

By clicking “Message Your Answer”, you agree to our terms of organization, privacy policy and cookie plan


Not the answer you're looking for? Browse other concerns tagged html css or ask your very own question.


website style / logo design © 2021 Stack Exreadjust Inc; user contributions licensed under cc by-sa. rev2021.9.1.40124


Your privacy

By clicking “Accept all cookies”, you agree Stack Exchange can keep cookies on your tool and also discshed information in accordance through our Cookie Policy.