This question already has answers here:
Two divs side by side - Fluid display [duplicate]
(9 answers)
Closed 3 years ago.
I'm trying to put two images side-by-side (occupying the rest of the body) bellow my header, but I didn't find I good solution yet.
I want these two images to be a link for two different pages.
I have tried different things but neither of them worked.
HTML:
<body>
<div class="header">
<div class="logo">
<img src="C:\Users\cristovao\Documents\vscode\real_estate\icons\logo_final.png">
<div class="lettering">
<h6><span class="bolder">F</span>ÁTIMA<span class="bolder">C</span>RISTÓVÃO <span class="smaller">by KELLER WILLIAMS</span></h6>
</div>
</div>
<div class="wrapper">
<div class="nav">
<ul>
<li>
Home
</li>
<li>
Projects
</li>
</ul>
</div>
</div>
</div>
<div class="container">
<div class="box">
<a href="./Atower.html">
<img src="./IMAGENS/CI02_00_SALA_P6_4K.jpg" width="100%" >
</a>
</div>
<div class="box">
<a href="./muda.html">
<img src="C:\Users\cristovao\Documents\vscode\real_estate\IMAGENS\CASA B (3).jpg" width="100%" >
</a>
</div>
</div>
</body>
CSS:
body {
margin: 0px;
padding: 0px;
}
.container {
display: inline-flex;
}
.box {
width: 50%;
}
.container {
float: left
}
.box {
width: 50%;
}
All my code is here;
It seems that using flexbox or float I cannot display each image with half of
the total width each, and 100% of the body height, I always have 50% of the
height below the images in white,
(representing body content) when I use flexbox and 50% of white space right when I use float.
Hope anyone can help me
Br
Use flexbox and set margin:0 and padding:0.
.container {
display: inline-flex;
margin:0;
padding:0;
}
.box {
width: 50%;
margin:0;
padding:0;
}
Make the <a> tag a block styled element so it neatly wraps your image. Then stretch your image to the full height and width of its parent and use object-fit: cover to make the image fill your box.
This will have the same effect as on a background-image with the background-size set to cover.
.box a {
display: block;
width: 100%;
height: 100%;
}
.box img {
display: block;
width: 100%;
height: 100%;
max-width: 100%;
max-height: 100%;
-o-object-fit: cover;
object-fit: cover;
}
Related
This question already has answers here:
Avoid an image to go outside a div?
(7 answers)
How do I stop an image displaying outside of the div
(6 answers)
Closed 8 months ago.
I have an issue with my images (svg, jpg,...., all formats). For instance if I want to make a header and set in CSS the header height for instance like this:
.container {
width: 1024px;
min-height: 300px;
margin-left: auto;
margin-right: auto;
}
header {
height: 300px;
display: flex;
align-items: center;
}
<div class="container">
<header>
<div>
<img src="https://via.placeholder.com/400/09f/fff.png" alt="" />
</div>
<nav>
</nav>
</header>
</div>
The image extends over the borders. How can I tackle that issue?
If the image needs to nested within div that themselves are nested within the constricting parent, you'll need to specify the size on those also.
.container{
height: 300px;
width: 1000px;
margin: 0 auto;
border: 3px solid red;
}
.container header, .container div{
height: 100%;
}
img{
height: 100%;
width: auto;
}
<div class="container">
<header>
<div>
<img src="https://via.placeholder.com/500" alt="">
</div>
</header>
</div>
This question already has answers here:
Image inside div has extra space below the image
(10 answers)
Closed 3 years ago.
For some reason a white line between the header and a section is visible that I have no idea why it is there, I double-checked and it's part of the content and not the padding, and I have no idea how to remove it that the header won't have that line between itself and the section below it, can someone have a look to see if there is something I missed in code?
header {
position: relative;
}
.headImage {
width: 100%;
height: 100%;
}
<header>
<img class="headImage" src="../images/Corson.with.wings.png" alt="Head Image">
</header>
I have added 3 solutions to fix the issue its because the default vertical-align value of the image is baseline; and img is considered as inline element
body {
background: url(https://placeimg.com/640/480/nature);
background-size: cover;
}
.header {
position: relative;
width: 100px;
margin: 10px;
background: red;
float:left;
}
.headImage {
width: 100%;
height: 100%;
}
.header.block img {
display: block; /* this will set image as a block */
}
.header.v-align img {
vertical-align: middle; /* this will align the inline element in the middle */
}
.header.f-left img {
float:left; /* in this case you will need to clear floats */
}
<div class="header">
<img src="https://placeimg.com/100/100/any" />
</div>
<div class="header block">
<img src="https://placeimg.com/100/100/any" />
</div>
<div class="header v-align">
<img src="https://placeimg.com/100/100/any" />
</div>
<div class="header f-left">
<img src="https://placeimg.com/100/100/any" />
</div>
I am trying to display an image next to two lines of text, which are centered. I have attached an example, and you will see from it that the image is to the left of the text, whereas I am trying to center the image to be on the left side of the text, and have a perfectly centered image/text.
CSS:
.center-class{
text-align:center;
}
.righty img{
max-width: 100px;
float:left;
}
.vid-open{
}
HMTL:
<section class="">
<div class="row pull-down">
<div class="center-class">
<div class="righty">
<img src="http://www.psdgraphics.com/file/white-egg.jpg" >
<h2>This is a header.</h2>
<h5 class="vid-open">some text some text some text<span class="icon-right-left-01-011" ></span></h5>
</div>
</div>
</div>
</section>
SEE DEMO
Simply wrap the text in a div and display it inline-block:
.center-class {
text-align: center;
}
.righty > * {
display: inline-block;
vertical-align: middle;
}
.righty img {
max-width: 100px;
}
<section class="power-of-egg">
<div class="row pull-down">
<div class="center-class">
<div class="righty">
<img src="http://www.psdgraphics.com/file/white-egg.jpg">
<div class="con">
<h2>This is an egg.</h2>
<h5 class="vid-open">eggs are very nutritious<span class="icon-right-left-01-011" ></span></h5>
</div>
</div>
</div>
</div>
</section>
Updated Codepen
Well, this will center the entire block:
.center-class{
text-align:center;
}
.righty img{
max-width: 100px;
float:left;
}
.vid-open{
}
.righty {
width: 300px;
margin: 0 auto;
}
The problem is that you've got your image inside of a div and div is a block-level element, which means it will expand to be the full width of its parent element.
If you take the image out of the div and make the div that contains the text have:
display:inline-block;
That div will shrink down to be only as wide as its content.
Here's your updated code: http://codepen.io/anon/pen/LNNJRQ
To horizontally center an element you can use display: block; and margin: auto;. There may be a better approach but this is the css I used to have the image in the center and the text to the right of it:
.righty > .con {
position: absolute;
top:0;
left: 55%;
}
.righty img {
display: block;
vertical-align: middle;
margin: auto;
max-width: 100px;
}
Note: the position of the class .con will vary based on screen size.
Here is the updated codepen.
Need help centering these images in CSS
I have been trying to center them by using a div id tag
<div id="centerLeftAboutPic">
<div class="single-about-detail clearfix">
<div class="about-img">
<img src="img/AttyRLev.jpg" alt="">
</div>
<div class="about-details">
<div class="pentagon-text">
<h1>R</h1>
</div>
<h3>Atty Rob Lev</h3>
<p>Click here to learn more about robert lev</p>
</div>
</div>
</div>
I also created a separate div ID for the second picture. Here is the CSS for one of the images. Both images have similar css.
#centerLeftAboutPic {
float: right;
width: 320px;
padding-left: 30px;
position: relative;
}
I am new to web developing so I am still confused on positioning. Thank you.
You can use the below in your css
text-align:center
snippet
#centerLeftAboutPic {
text-align:center;
padding-left:30px;
position: relative;
border:solid black;
}
img{
width:50px;
height:50px;
margin-left:70px;
}
<div id="centerLeftAboutPic">
<img class="img-responsive" src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRH181kjqkxFXqYU4bTP8zdfiAfO4iceJrxA4lMPXMCKY61eX9v" /></a>
<img class="img-responsive" src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRH181kjqkxFXqYU4bTP8zdfiAfO4iceJrxA4lMPXMCKY61eX9v" /></a>
<div>
</div>
If you want to center the image relative to its container then all you need to do is add this to its CSS.
#centerLeftAboutPic img {
margin-left: auto;
margin-right: auto;
display: block;
}
However it's only going to center it within the 320px container you gave it in #centerLeftAboutPic. If you adjusted that property to width: 100%; it will center it on the page.
Here's a fiddle for you. I set the width to 100% in the example, play around with it and you'll see what I mean: https://jsfiddle.net/v5k8rjy2/2/
If you want to center the entire #centerLeftAboutPic div you'll need to put the margins on the div its self and remove the float: right property. Here's a fiddle of that: https://jsfiddle.net/v5k8rjy2/5/
#centerLeftAboutPic {
width: 320px;
position: relative;
margin-left: auto;
margin-right: auto;
display: block;
}
i just cant make those left right fixed divs responsive. 3 divs : |fixed| |normal| |fixed|
those 3 divs are in one div.
if im going on full scale window they are working perfectly, but as i down size the window it's screws the all thing up.
i dont know how to fix that- my center div working perfectly- responsive and centered.
but the left and right fixed just wont be responsive as well.
i guess the solution is connected to responsive width of the fixed divs.. any ideas?
i added JSFIDDLE example for your convenient :
this is the structure :
<div>
<div **fixed** left> <img> </div>
<div **normal** center> 2 divs for left and right inside the center div </div>
<div **fixed** right> </div>
</div>
REAL html :
<div id="div_header">
<div class="cloumn right" id="div_right"><img src="http://placehold.it/250x600"></div>
<div class="cloumn center" id="div_center">
<div id="inside_center">
<div class="left_side" id="left_inside_center">
</div>
<div class="right_side" id="right_inside_center">
<h1> headline </h1>
<img src="http://img-9gag-lol.9cache.com/photo/a7KwPAr_460s.jpg">
</div>
</div>
</div>
<div class="cloumn left" id="div_left"><img src="http://placehold.it/250x600"></div>
</div>
</div>
REAL CSS:
body {
margin-top: 0 !important;
direction: rtl;
}
#right_inside_center img {
width: 97%;
margin-top: 7px;
}
#left_inside_center {
float:left;
width:inherit;
}
#right_inside_center {
float:right;
width:65%;
}
#inside_center {
height: auto;
overflow: hidden;
}
#div_header {
text-align: center;
display: table;
width: 100%;
table-layout: fixed;
}
.cloumn {
display: table-cell;
}
.center {
background:green;
height: 1500px;
width: 60%;
}
.left {
position: fixed;
width: 18%;
}
.right {
position: fixed;
width: 18%;
}
setting the width of the images to 100% will fit the images in the parent and made some minor changes to width of left and right
JS Fiddle
Hi barry you can use bootstrap css frame work...
http://www.getbootstrap.com
It's very easy to use...
if you need more detail about bootstrap go to the official website.