Hi I have been trying to get 2 div boxes next to each other where left box is set max-width:350 the div next to that take up variable width. I have managed that with the display-flex. Problem I am trying to solve is that I want to have the 2nd div drop below the first when the screen size is reduced. Eg for mobile screen width
<div style="display:flex;">
<div style="max-width:350px; float:left; height:auto; background:gray; margin:10px; text-align:center;">
<img src="Ss0Bba.jpg" style="width:350px" alt="" /></div>
<div style="float:left; margin:20px">All of my page contents are in here </div>
</div>
Thanks for any help
Is this something that you are looking for?
<div style="display:flex; justify-content: center; align-items: center; flex-wrap: wrap;">
<div style="max-width:350px; height:auto; margin:10px;">
<img src="https://cdn.pixabay.com/photo/2019/07/25/16/29/background-image-4363006_960_720.png" style="width:350px" alt="" /></div>
<div style="flex: 0 50%; margin:20px">All of my page contents are in here
All of my page contents are in here
All of my page contents are in here
All of my page contents are in here
All of my page contents are in here
All of my page contents are in here
All of my page contents are in here
All of my page contents are in here
</div>
</div>
I removed some CSS and added align-items: center; flex-wrap: wrap; to wrap the content and also center the content nicely.
you need to add flex-wrap: wrap; to the parent element
and add a min-width to your second
<div style="display:flex; flex-wrap: wrap;">
<div style="max-width:350px; float:left; height:auto; background:gray; margin:10px; text-align:center;">
<img src="https://images.template.net/wp-content/uploads/2016/04/30093540/Wave-Background1.jpeg" style="width:350px" alt="" /></div>
<div style="float:left; margin:20px; min-width: 300px">All of my page contents are in here </div>
</div>
<div style="display: block; width:100%; height:100%;">
<div style="max-width:350px; float:left; height:auto; background:gray; margin:10px; text-align:center;">
<img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_92x30dp.png" style="width:350px" alt="" /></div>
<div style="margin:20px;"><p >All of my page contents are in here </p></div>
</div>
<div style="display: block; width:100%; height:100%;">
<div style="max-width:350px; float:left; height:auto; background:gray; margin:10px; text-align:center;">
<img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_92x30dp.png" style="width:350px" alt="" /></div>
<div style="margin:20px;float:left;"><p >All of my page contents are in here </p></div>
</div>
Related
Im trying to have 3 images side by side in a flex container but the images are much too large and its stretching the page and creating a scroll bar.Tried a tip to use flex wrap but that didn't work.Should I just resize in photoshop?.
<section class="main-content">
<div class="image">
<img src="img/devil-ivy-can.jpg">
</div>
<div class="image">
<img src="img/krimson-princess-can.jpg">
</div>
<div class="image">
<img src="img/spiderwort-can.jpg">
</div>
</section>
.main-content{
display: flex;
}
div{
width:100%;
padding:10px;
margin:10px;
}
Try this
.container {
display: flex;
flex-wrap: wrap;
background-color: grey;
}
img {
width: 100%;
}
div {
flex: 1;
padding: 10px;
margin: 10px;
}
<section class="container">
<div class="image">
<img src="https://atlas-content1-cdn.pixelsquid.com/assets_v2/127/1273408777629996108/jpeg-600/G13.jpg">
</div>
<div class="image">
<img src="https://atlas-content1-cdn.pixelsquid.com/assets_v2/127/1273408777629996108/jpeg-600/G13.jpg">
</div>
<div class="image">
<img src="https://atlas-content1-cdn.pixelsquid.com/assets_v2/127/1273408777629996108/jpeg-600/G13.jpg">
</div>
</section>
hello i have try to solve your problem you can try this in your CSS code.
.main-content{
display: flex;
gap:10px
}
div{
width:100%;
gap:10px;
}div.image img{
width:100%;
object-fit:cover;
}
<section class="main-content">
<div class="image">
<img src="https://www.imgonline.com.ua/examples/random-pixels-wallpaper.jpg">
</div>
<div class="image">
<img src="https://www.imgonline.com.ua/examples/random-pixels-wallpaper.jpg">
</div>
<div class="image">
<img src="https://www.imgonline.com.ua/examples/random-pixels-wallpaper.jpg">
</div>
</section>
in your css code at div selector i prefer using gap to give space between items than using padding and a margin
if you give the img width 100% it will fill the div.image and set object-fit with value cover. The CSS object-fit property is used to specify how an or should be resized to fit its container.
I have the following markup which uses bootstrap 4:-
<div class="container">
<div class="row ">
<div class="col-xl-12">
<img src="~/img/img1.png" style="height:60.3px;width:750px" class="mx-auto d-none d-sm-block" />
<p style="color: #2EBDBE;font-weight:bold;font-size:13px;margin-bottom: 0px;">...</p>
<p style="color: #2EBDBE;font-weight:bold;font-size:13px;margin-bottom: 0px;">...</p>
<img src="~/img/img2.png" class="mx-auto d-block" />
<p style="color: #2EBDBE;font-weight:bold;font-size:13px;margin-bottom: 0px;">...</p>
<p style="color: #2EBDBE;font-weight:bold;font-size:13px;margin-bottom: 0px;">...</p>
</div>
</div>
</div>
Currently i got this layout:-
where the images are centered while the text is left aligned, so how i can force the text to have the same vertical alignment as the images?
Try this, but edit classes or whatever to make it work on your site:
<div class="container" style="position:relative; display:inline-block;">
<img class="mx-auto d-none d-sm-block" style="display:block; height:60.3px;width:750px" src="https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/close-up-of-tulips-blooming-in-field-royalty-free-image-1584131603.jpg">
<div class="text-box" style="position:relative; height:100%; text-align: center; display:flex; justify-content: center; align-items: flex-start; width: 100%;">
<p class="centeredTxt" style="display: block; color: #333;">Text is centered under image</p>
</div>
<div class="text-box" style="position:relative; height:100%; text-align: center; display:flex; justify-content: center; align-items: flex-start; width: 100%;">
<p class="centeredTxt" style="display: block; color: #333;">Text is centered under image 2</p>
</div>
</div>
Difficult to understand how this would work in your code as I don't have the complete code, but I edited my answer to better suit your request.
<div id="outer" style="position:relative; width:100%; height:100%">
<div id="1" style="position:relative; width:25%; height:auto;"></div>
<div id="2" style="position:relative; width:65%; height:auto;">
<div id="2a" style="position:relative; width:15%; height:auto;"></div>
</div>
</div>
The problem is that the #2 and #2a are not aligned to #1 and I have to use top:-xxpx to align to top.
http://jsfiddle.net/D7HZR/
Fiddle. Is it what you are looking for?
#1, #2{
float:left;
}
Frankly speaking I'm not sure what you want. I think you want that :
<div id="outer" style="position:relative; width:100%; height:400px; border:#000000 solid 1px;">
<div id="1" style="float:left; width:25%; height:400px; background:#fff000;"></div>
<div id="2" style="float:left; width:65%; height:400px;background:#ff0000;">2
<div id="2a" style="float:left; width:15%; height:auto;background:#000fff;">2a</div>
<div style="clear:both"></div>
</div>
</div>
http://jsfiddle.net/D7HZR/2/
Ok, i think that i've understand your problem, just add the display property on your divs of id 1 and 2
<div id="outer" style="width:100%; height:400px; border:#000000 solid 1px;">
<div id="1" style="display: inline-block; width:25%; height:400px; background:#fff000;"></div>
<div id="2" style="display: inline-block; width:65%; height:400px;background:#ff0000;">
<div id="2a" style="width:15%; background:#000fff;"></div>
</div>
</div>
http://jsfiddle.net/p5KQJ/
#outer div {
float: left;
}
You also need to set a height on the inner div if you want it to take up vertical space.
It's unclear if you want the 3rd div nested or not so I made a fiddle that has one version nested and one with them all side by side.
FIDDLE here
I have a strange problem.One of my div's width is not working. My CSS is like
.product_info
{
margin-top:10px;
background:#444;
width:850px;
}
.product_image
{
width:350px;
text-align:center;
float:left;
padding:8px;
border:1px solid #e9e9e9;
background:#fff;
}
.product_details
{
float:left;
width:400px;
margin-left:25px;
font-size:14px;
font-family:"Helvetica";
background:#d71414;
}
And My HTML file is
<div class="product_info">
<div class="product_image">
</div>
<div class="product_details">
<div class="selection">
<form action="{$path_site}{$indeex_file}" method="post">
Size
{foreach name = feach item = k from = $product_size}
<input type="radio" name="size" value="{$k.product_size}" />{$k.product_size}
{/foreach}
</div>
<div class="selection">
No. of pieces <input type="text" name="quantity">
</div>
<div class="prc">
<span class="WebRupee">Rs.</span> {$product_info->product_cost}.00
</div>
<div class="buy_btn"><input type="submit" value="BUY" /></div>
</form>
</div>
</div>
But as you can see in the attached image my div product_info's width is not 850px, Whats wrong
display: flex on the parent element also changes how width and height work. Disable shrinking/growing by flex: 0 0 auto;, or use min-width and max-width instead.
Width and height basically lose the original meaning in this context and will act as a flex-basis, see geddski: The Difference Between Width and Flex Basis
.box {
margin: 2px;
border: 1px solid black;
padding: 3px;
}
.box.gray {
background: lightgray;
}
.box.container {
display: flex;
flex-flow: row;
}
<div class="box" style="
width: 300px;
font-size: 80%;
">
<div>
width: 300px;
</div>
<div class="box container">
<div class="box gray" style="width: 200px;">
width: 200px;
</div>
<div class="box gray" style="width: 200px;">
width: 200px;
</div>
</div>
<div class="box container">
<div class="box gray" style="
width: 200px;
flex: 0 0 auto;
">
width: 200px;<br>
flex: 0 0 auto;
</div>
<div class="box gray" style="width: 200px;">
width: 200px;
</div>
</div>
</div>
Try
display:block
It should work
display: inline-block; Worked for me
Example:
label {
min-width: 90px;
display: inline-block;
}
i hope you are looking like this :- http://tinkerbin.com/MU2CUpre
Actually you have used floating in your child div's and didnt clear your parent div.
So i have cleared your parent div through overflow:hidden; in parent div and cleared this child div .product_details also its working fine......
CSS
.product_info
{
margin-top:10px;
background:#444;
width:850px;
overflow:hidden;
}
.product_details
{
float:left;
width:400px;
margin-left:25px;
font-size:14px;
font-family:"Helvetica";
background:#d71414;
clear:both;
}
Use the clear: both; property.
.product_info {clear: both;}
Hi now define your class .product_into overflow:hidden;
Live demo
as like this
.product_info{
overflow:hidden;
}
=======
or option 2
define one css
Css
.clr{
clear:both;
}
Put the this div in last line closing the .product_info class
<div class="product_info">
<div class="product_image">
</div>
<div class="product_details">
<div class="selection">
<form action="{$path_site}{$indeex_file}" method="post">
Size
{foreach name = feach item = k from = $product_size}
<input type="radio" name="size" value="{$k.product_size}" />{$k.product_size}
{/foreach}
</div>
<div class="selection">
No. of pieces <input type="text" name="quantity">
</div>
<div class="prc">
<span class="WebRupee">Rs.</span> {$product_info->product_cost}.00
</div>
<div class="buy_btn"><input type="submit" value="BUY" /></div>
</form>
</div>
<div class="clr"></div>
</div>
Live demo option two
I have a pretty common layout issue that I have traditionally used a table to solve, but would like some advice on getting it done with CSS. I have 3 images that makeup a 'container'. The left and right images are usually just shown using tags, and the center image is displayed as a 'background-image" with my content over it, so that the content appears to be in the container. I'm sure you've seen/used this a million times:
<table width="100" cellpadding="0"><tr>
<td width="50"><img src="myleftimage" /></td>
<td style="background: url('mymiddleimage');">Content goes here...</td>
<td width="50"><img src="myrightimage" /></td>
</tr></table>
The nice thing about this is that the width of the table is always the width of the browser (or parent) and the middle column where the content is dynamically sizes to take up the remaining space between the left/right images.
What I want to is recreate this using CSS, with as little hard coded info as possible. So something like this:
<div style="float:left; width:100%">
<div style="width: 50px;float:left;"><img src="myleftimage" /></div>
<div style="background: url('mymiddleimage');float:left;width:???">Content goes here...</div>
<div style="width: 50px;float:left;"><img src="myrightimage" /></div>
</div>
This works great accept for the middle div -how do I set the width? Right now I can hard-code it to be, say, 92%, etc. But want I want is for it to auto-fill the space. Can it be done using only CSS?
try
<div style="width:100%;">
<div style="width:50px; float: left;"><img src="myleftimage" /></div>
<div style="width:50px; float: right;"><img src="myrightimage" /></div>
<div style="display:block; margin-left:auto; margin-right: auto;">Content Goes Here</div>
</div>
or
<div style="width:100%; border:2px solid #dadada;">
<div style="width:50px; float: left;"><img src="myleftimage" /></div>
<div style="width:50px; float: right;"><img src="myrightimage" /></div>
<div style="display:block; margin-left:auto; margin-right: auto;">Content Goes Here</div>
<div style="clear:both"></div>
</div>
This will do what you want. Fixed sides with 50px-width, and the content fills the remaining area.
<div style="width:100%;">
<div style="width: 50px; float: left;">Left Side</div>
<div style="width: 50px; float: right;">Right Side</div>
<div style="margin-left: 50px; margin-right: 50px;">Content Goes Here</div>
</div>
Or, if you know the width of the two "side" images and don't want to deal with floats:
<div class="container">
<div class="left-panel"><img src="myleftimage" /></div>
<div class="center-panel">Content goes here...</div>
<div class="right-panel"><img src="myrightimage" /></div>
</div>
CSS:
.container {
position:relative;
padding-left:50px;
padding-right:50px;
}
.container .left-panel {
width: 50px;
position:absolute;
left:0px;
top:0px;
}
.container .right-panel {
width: 50px;
position:absolute;
right:0px;
top:0px;
}
.container .center-panel {
background: url('mymiddleimage');
}
Notes:
Position:relative on the parent div is used to make absolutely positioned children position themselves relative to that node.
making a dynamycal width with mobile devices support
http://www.codeography.com/2011/06/14/dynamic-fixed-width-layout-with-css.html