I am new to html and css. My question is how do I place image and two buttons to be sure that they will be displayed together? Look at the image to understand what i mean. Thanks!!!!
-
Please try it yourself first. In order for us to help you better, please update your question so that it shows your relevant code in a minimal, complete, and verifiable example. It would be helpful if you could let us know what you have tried so far to solve your problem. For further information, please refer to the help article regarding how to ask good questions and take the tour.– wazzMay 27, 2018 at 18:06
2 Answers
This is my solution. Try opening the snippet in full screen, and then resize the browser.
When the width of the screen is greater than 768px
(u can change this value) the width of the container
is 500px
.
And when the width is less, then the container takes full width of the screen.
This is handled by
.container {
width: 500px;
margin: 0 auto;
}
@media(max-width:768px) {
.container {
width: 100%;
}
}
As for the buttons, their combined width will be always equal to that of the image.
This is handled by
.btn-container {
font-size: 0;/*used for removing whitespace from inline elements*/
}
.btn-container button {
width: 50%;
font-size: initial;
padding: 15px;
}
* {
box-sizing: border-box;
}
.container {
width: 500px;
margin: 0 auto;
}
@media(max-width:768px) { /* can be any number less than this depending on ur choice */
.container {
width: 100%;
}
}
img {
display: block;
width: 100%;
height: 200px;
}
.btn-container {
font-size: 0;
}
.btn-container button {
width: 50%;
font-size: initial;
padding: 15px;
}
/*Space between */
.btn-holder {
width: 50%;
display: inline-block;
}
.btn-holder button {
width: 100%;
}
.b1 {
padding-right: 5px;
}
.b2 {
padding-left: 5px;
}
<div class="container">
<img src="http:placehold.it/250x250">
<div class="btn-container">
<button>button 1 </button>
<button>button 1 </button>
</div>
</div>
<br/>
<br/>
<br/>
<h3>If u want space between buttons</h3>
<div class="container">
<img src="http:placehold.it/250x250">
<div class="btn-container">
<div class="btn-holder b1">
<button>button 1 </button>
</div>
<div class="btn-holder b2">
<button>button 1 </button>
</div>
</div>
</div>
for the image centering you can just use:
<div id="container">
<img style="margin-left:auto;margin-right:auto;"></img>
</div>
Then for the buttons you can use:
<div id="wrapper">
<button id="button1">button left</button>
<button id="button2">button right</button>
</div>
and then this css:
#button1 {
display: inline-block;
width:120px;
height:120px;
}
#button2 {
display: inline-block;
width:160px;
height:160px;
}
Which you then combine into this:
#button1 {
display: inline-block;
width:120px;
height:120px;
}
#button2 {
display: inline-block;
width:160px;
height:160px;
}
<div id="container">
<img src="https://images.duckduckgo.com/iu/?u=https%3A%2F%2Fupload.wikimedia.org%2Fwikipedia%2Fcommons%2Fthumb%2F8%2F8f%2FExample_image.svg%2F1024px-Example_image.svg.png&f=1" style="margin-left:auto;margin-right:auto;"></img>
<br>
<button id="button1">button left</button>
<button id="button2">button right</button>
</div>
in case you're confused as to what the <br>
tag does it is just a line break in order to make sure that the buttons don't get placed next to the image.