I am created a web page. I have a div, with an image and some text, along with a form. The image goes outside of the div.
I want the gray line to expand to fit the image. I want to be able to put any size image, height (already works), and width in there, and have it be fine, so fixed width divs are out of the way. I am also using flexbox styling.
Here is the minimum reproducible code.
.cardstyle {
margin: 2em;
border: 2px solid lightgray;
overflow: visible;
}
#block_container {
display: flex;
}
<form method="POST">
<div id="block_container">
<div class="cardstyle">
<div style="width:15vw; height:15vw">
<img src="https://cdn.iphoneincanada.ca/wp-content/uploads/2020/03/model-3.png" height="100%">
</div>
<br>
<p style="font-size: 2.5vw; margin-left: 7%;">Tesla Model Y</p>
<p style="margin-left: 7%;">Luxury Electric Car. </p>
<p style="margin-left: 7%;">60000/each</p>
<select style="margin-left: 7%;" name="select">
<option value="0">0</option>
</select>
<br>
<br>
</div>
</div>
</form>
Try putting display: inline on the div surrounding the img tag
Example of it working here: https://codepen.io/annaazzam/pen/NWxwpgJ?editors=1010
The Markup you wrote! Could be more web standard and semantic, Here I just update code on top of your code.
<!DOCTYPE html>
<html>
<head>
<style>
.cardstyle {
margin: 2em;
border: 2px solid lightgray;
}
#block_container {
display: flex;
}
.cardstyle img {
object-fit: contain;
width: 100%;
height: auto;
}
</style>
</head>
<body>
<form method="POST">
<div id="block_container">
<div class="cardstyle" style="width:25vw;">
<img src="https://cdn.iphoneincanada.ca/wp-content/uploads/2020/03/model-3.png">
<br>
<p style="font-size: 2.5vw; margin-left: 7%;">Tesla Model Y</p>
<p style="margin-left: 7%;">Luxury Electric Car. </p>
<p style="margin-left: 7%;">60000/each</p>
<select style="margin-left: 7%;" name="select">
<option value="0">0</option>
</select>
<br>
<br>
</div>
</div>
</form>
</body>
</html>
Related
I have two words that will change after some JavaScript coding. They will be arrays. I can perform the JavaScript coding well, but I want them to be aligned instead of one above the other:
<div class="testArrayDiv">
<input type="text" id="testArrayText" value="aqui" class="testArrayText">
<p id="pTextIng" class="pTextIng">Inglés</p>
<p id="pTextPor" class="pTextPor">Português</p>
<button id="btnArray" class="btnArray">Test Array</button>
</div>
My CSS coding:
.pTextIng {
margin-left: 45%;
}
.pTextPor {
margin-left: 45%;
}
The words "Inglés" and "Português" will become columns after some Javascript commands, but they are not aligned and I want them to be aligned.
.pTextIng {
border:1px solid black;
width:80px;
display:inline-block;
}
.pTextPor {
border:1px solid red;
width:80px;
display:inline-block;
}
<div class="testArrayDiv">
<input type="text" id="testArrayText" value="aqui" class="testArrayText">
<p id="pTextIng" class="pTextIng">Inglés</p>
<p id="pTextPor" class="pTextPor">Português</p>
<button id="btnArray" class="btnArray">Test Array</button>
</div>
<p> automatically inserts a line break after the text. If you do not want this you should use <span>. I assume you want both words on the same line as your input field, so you should put both <span> elements inside a <div> and apply margin-left to that.
HTML:
<div class="indentation">
<span id="pTextIng" class="pTextIng">Inglés</span>
<span id="pTextPor" class="pTextPor">Português</span>
</div>
CSS:
.indentation {
display: inline-block;
margin-left: 45%;
}
If you make a div with both p inside like:
<div class="testArrayDiv">
<input type="text" id="testArrayText" value="aqui" class="testArrayText">
<div class="idiomas">
<p id="pTextIng" class="pTextIng">Inglés</p>
<p id="pTextPor" class="pTextPor">Português</p>
</div>
<button id="btnArray" class="btnArray">Test Array</button>
</div>
And then you make this div element flex and flex-direction: row
.idiomas{
display: flex;
flex-direction: row;
}
You need to add vertical-align: top; to fix the issue
.testAlign p {
display: inline-block;
vertical-align: top;
/* other styles */
}
and also that <p> tags need to be inside a <div>
<div class = "testAlign">
<p id="pTextIng" class="pTextIng">Inglés</p>
<p id="pTextPor" class="pTextPor">Português</p>
</div>
my interface in Google chrome browser (Is normal, I set it like this)
But when I click the inspect and click google device toolbar, the interface look like:
.btn {
position: absolute;
top: 85%;
left: 50%;
transform: translate(-50%, -50%);
cursor: pointer;
}
.div_hover {
background-color: #F9F7F2;
}
<div style="width: 80%; margin: auto;">
<div class="div_hover" style="width: 473px; height: 200px; margin: auto;">
<p style="font-size: 18px;">Dear Customer</p>
<hr>
<p style="font-size: 11px">Welcome.......</p>
<hr>
<p style="font-size: 11px">bla..bla...</p>
<hr>
</div>
<div style="width: 49%; margin: auto; position: relative;">
<img src="https://www.rspcasa.org.au/wp-content/uploads/2019/01/Adopt-cat-mobile-banner-600x300-fit-constrain-q70-mobile_banner_image.jpg">
<form action="https://www.google.com/">
<input type="image" src="https://www.freepngimg.com/thumb/download_now_button/25399-6-download-now-button-thumb.png" class="btn" />
</form>
</div>
</div>
How can I make it both same?
Well, you are currently setting the div have the width of 49% but <img> doesn't have any width set. That is causing the image to be its original size. If you want to display the image in the same way for different screen width, you should do something like this:
<div style="width: 80%; margin: auto;">
<div class="div_hover" style="width: 473px; height: 200px; margin: auto;">
<p style="font-size: 18px;">Dear Customer</p>
<hr>
<p style="font-size: 11px">Welcome.......</p>
<hr>
<p style="font-size: 11px">bla..bla...</p>
<hr>
</div>
<div style="width: 473px; margin: auto; position: relative;">
<img width="100%" src="https://www.rspcasa.org.au/wp-content/uploads/2019/01/Adopt-cat-mobile-banner-600x300-fit-constrain-q70-mobile_banner_image.jpg">
<form action="https://www.google.com/">
<input type="image" src="https://www.freepngimg.com/thumb/download_now_button/25399-6-download-now-button-thumb.png" class="btn" />
</form>
</div>
</div>
As you see, don't give the custom width to the second child div. If you have to give the width as 49% for second div, then give the width for <img> as well.
https://jsfiddle.net/2epL85r1/
I'm working on a browser app. I have read about a couple of dozen pages about the DIV tag. I just can not get it to work. I know I should use CSS but I will incorporate that at the end after I get some other things done.
Basically I want a header and a footer. Then a fixed width side bar and the rest to be filled with a content area. I almost got it but the sidebar starts too low (it should be the same height of the content) and the content does not expand to fit the width of the browser.
Here is what I have got:
<header style='background-color:#013499; height:60'>
<br>
<span style='color:white'>    Whole Number</span>
<select>
<option value=""></option>
<option value="1">One</option>
<option value="2">Two</option>
</select>
</header>
<div>
<div style='display:inline-block; background-color:#7690C5; width:200'>
Task1
<br>Task2
<br>
</div>
<div style='display:inline-block; background-color:#F2F2F2'>
Top
<br>Content
<br>Bottom
</div>
</div>
<footer style='background-color:#013499; height:60'>
<br>
<form name="Actions" action="test.html" method="post">
   
<input type="submit" name="send_button" value="Save">   
<input type="submit" name="send_button" value="Cancel">
</form>
</footer>
I found this post which helped a lot. But it is still not right. I cant seem to find any documentation that explains how these things work together.
I cant figure out how to get the content to fill up the remaining space. It ends up too short (sizing to the actual content) or extending beyond the screen size because at 100% it includes the width of the sidebar. I know whats going wrong but I do not know how to make it right.
I moved the styles out of the HTML now.
html, body {
height: 100%;
margin: 0;
}
header {
width: 100%;
height: 60px;
background-color: #013499;
margin: 0;
}
#wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 0 -60px 0; /* the bottom margin is the negative value of the footer's height */
position: relative;
}
#sidebar {
background-color: #7690C5;
width: 300px;
height: auto !important;
bottom: 60px;
top: 60px;
display: inline-block;
position: absolute;
}
#content {
background-color: #F2F2F2;
width: 100%;
height: auto !important;
bottom: 60px;
top: 60px;
margin-left: 300px;
display: inline-block;
position: absolute;
}
footer {
margin: -60px 0 0 0;
width: 100%;
height: 60px;
background-color: #013499;
}
#buttons {
margin-right: 20px;
text-align: right;
}
<!DOCTYPE HTML>
<html>
<head>
<title>Viewer test</title>
<link rel=Stylesheet Type='text/css' href=ERP.css>
</head>
<body>
<div id="wrapper">
<header>
<br>
<span style='color:white'>    Whole Number</span>
<select>
<option value=""></option>
<option value="1">One</option>
<option value="2">Two</option>
</select>
</header>
<div id="sidebar">
Task1<br>
Task2<br>
</div>
<div id="content">
Content
</div>
</div>
<footer>
<br>
<form id='buttons' name="Actions" action="test.html" method="post">
<input type="submit" name="send_button" value="Save">   
<input type="submit" name="send_button" value="Cancel">
</form>
</footer>
</body>
</html>
Firstly, don't use inline styles. Anyone that touches your code will hate you and when you want to apply a change to 100 elements that are the same at once you will equally hate yourself.
Also, HTML is the bread, CSS is the butter. On their own they're rubbish but together they're super awesome.
The only reason your "sidebar" isn't full height is because the content of the element next to is has more content. You need to incorporate CSS to stop this from happening.
See the fiddle
The reason why the sidebar was a little bit down was because of the inline-block that you had in the style.In the fiddle that i have made i have replaced the display:inline-block; with float:left;. Kindly see the fiddle
The new markup is as follows
<header style='background-color:#013499; height:60px'>
<br> <span style='color:white'>    Whole Number</span>
<select>
<option value=""></option>
<option value="1">One</option>
<option value="2">Two</option>
</select>
</header>
<div>
<div style='float:left; background-color:#7690C5; width:200px;'>Task1
<br>Task2
<br>
</div>
<div style='float:left; background-color:#F2F2F2;'>Top
<br>Content
<br>Bottom</div>
</div>
<footer style='clear:both;background-color:#013499; height:60px'>
<br>
<form name="Actions" action="test.html" method="post">   
<input type="submit" name="send_button" value="Save">   
<input type="submit" name="send_button" value="Cancel">
</form>
</footer>
Try using fixed (or absolute) positions perhaps. Try this, for example:
<header style="background-color:#013499; height:60; right: 0;left: 0;top: 0;position: fixed;">
<div style="display:inline-block; background-color:#F2F2F2;float: right;top: 60px;position: fixed;right: 0;">
<footer style="background-color:#013499; height: 62px;position: fixed;width: 100%;left: 0;bottom: 0;">
I've tried several combinations but have not found one yet that will display gracefully without adding unneeded scrolls bars.
I have a page that displays a Navigation column and then a content column. In the content column I am displaying a PDF in an IFrame. The left hand column is fixed at say 150px. I need the the right hand column to consume the rest of the width of the page and all of the height of the page. For some reason when the IFrame is put in the right hand div grows by about 5px and it adds an additional scroll bar that just mucks things up. I can make the scroll bar go away using the overflow-y: hidden but that seems to be hack rather than the right thing to do.
I've tried it with both an iframe and object tags and the behavior is the same.
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
html, body
{
height: 100%;
width: 100%;
padding: 0px;
margin: 0px;
background-color:#808080;
}
div#nav
{
position: absolute;
height: 100%;
width: 150px;
top: 0;
left: 0;
background-color:#C0C0C0;
}
div#content
{
top: 0px;
height: 100%;
margin-left: 150px;
background-color: #2F4F4F;
}
iframe#pdf
{
width:100%;
height:100%;
}
</style>
</head>
<body>
<div id="nav">
<fieldset class="lookupFields">
<div>
<label for="book" >Book:</label>
<input type="text" id="book" size="5" />
</div>
<div>
<label for="page">Page:</label>
<input type="text" id="page" size="5" />
</div>
<div>
<input type="button" id="btnViewImage" value="View" />
</div>
</fieldset>
</div>
<div id="content">
<iframe id="pdf" frameborder="0" src="06500001-2.pdf"></iframe>
</div>
</body>
</html>
Here's a FIDDLE based on your code.
The PDF seems to fit quite nicely and I don't get an extra scroll bar. The PDF page resizes with I change the size of the page (I'm using IE11).
I didn't change much in the HTML.
<div id="nav">
<fieldset class="lookupFields">
<div>
<label for="book" >Book:</label>
<input type="text" id="book" size="5" />
</div>
<div>
<label for="page">Page:</label>
<input type="text" id="page" size="5" />
</div>
<div>
<input type="button" id="btnViewImage" value="View" />
</div>
</fieldset>
</div>
<div id="content">
<iframe id="pdf" frameborder="0" src="http://www.historytools.org/sources/lincoln-gettysburg.pdf">
</iframe>
</div>
I'm trying to get a bunch of div's to wrap around an image, but am failing.
Since pasting HTML doesn't seem to work in StackOverFlow, here is my current attempt at emulating a Outlook 2010 contact entry.
Source from: http://www.perfmon.com/download/contactdivtest.htm
(edit: or check out #Hristo's cool online editor )
<html>
<head>
<title>
</title>
<style type="text/css">
.contactLarge{
width: 250px;
height: 220px;
}
img.picture {
margin-left: 0px;
margin-bottom: 0px;
float: left;
}
.contactLarge item{
}
</style>
</head>
<body>
<div class="contactLarge">
<div style="background-color:#C5CED8;clear:both">title </div>
<img class="picture" width="100" height="200" src="ContactBigLeftBorder.png" alt="">
First, Last <br>
First, Last <br>
First, Last <br>
First, Last <br>
<div style="width:100%;font-weight:bold; float: left;">LastName, Firstname</div>
<div style="font-weight:bold;clear:both;" >CompanyName</div>
<div >Title</div>
<div >Work#</div>
<div >Mobile#</div>
<div >Home</div>
<div >email1</div>
<div >email2</div>
<div >email3</div>
<div >Street</div>
<div style="background-color:#F1F5F9; float:left;" >City,</div>
<div style="background-color:#F1F5F9; float:left;" >State</div>
<div style="background-color:#F1F5F9;" >Zip</div>
<div style="background-color:#F1F5F9; clear:left; float:left;" >httppage</div>
<div style="background-color:#F1F5F9; ">im</div>
</div>
</body>
</html>
Can anyone tell me what I need to do to make all the div's move up and wrap around the image? I really hope I'm not missing something simple...
Here is the target layout I'm attempting:
alt text http://perfmon.com/download/contactdivtest.bmp
foor your specific solution span can work better for you:
check the version with span:
<html>
<head>
<title>
</title>
<style type="text/css">
.contactLarge{
width: 250px;
height: 220px;
}
.contactLarge span{
font-weight: bold;
}
img.picture {
margin-left: 0px;
margin-bottom: 0px;
float: left;
}
.contactLarge item{
}
</style>
</head>
<body>
<div class="contactLarge">
<div style="background-color:#C5CED8;clear:both">title </div>
<img class="picture" width="100" height="200" src="http://www.perfmon.com/download/ContactBigLeftBorder.png" alt="">
First, Last <br>
First, Last <br>
First, Last <br>
First, Last <br>
<span>LastName, Firstname</span> <br />
<span>CompanyName</span> <br />
<span >Title</span> <br>
<span >Work#</span> <br>
<span >Mobile#</span> <br>
<span >Home</span> <br>
<span >email1</span> <br>
<span >email2</span> <br>
<span >email3</span> <br>
<span >Street</span> <br>
<span style="background-color:#F1F5F9; float:left;" >City,</span> <br>
<span style="background-color:#F1F5F9; float:left;" >State</span> <br>
<span style="background-color:#F1F5F9;" >Zip</span> <br>
<span style="background-color:#F1F5F9;" >httppage</span> <br>
<span style="background-color:#F1F5F9; ">im</span> <br>
</div>
</body>
</html>
Div is a block-level element. It will take up full width and generate a break before and after.
Img is, by default, an inline element. You want to wrap it in another one (not float). Either use span's instead (span is div's inline brother) or set the css display property to inline on the div.
A very useful trick for these sorts of things is the "display: inline-block".
It displays things inline (so the wrapping will work), but leaves you with almost the full configurability of a block-level element.
A <div> is a block level element - this means that it automatically clears to a new line and has 100% width. Without seeing your html or css it's hard to see where you're going wrong but try using float:
div {
float: right;
width: 50%;
}
Edit:
Now that you've posted a picture of what you want I can say that you'll probably want something like this:
HTML:
<div id="container">
<img src="foo.jpg" />
<div id="content">
<p>Blah blah</p>
<p>More blah blah</p>
</div>
</div>
CSS:
#content {
width: 60%;
float: right;
}
Just make sure that the width of the img + width of the inner div is less than the width of the containing div.
If you create a "textbox" div around your text and float it left you should be good to go. See:
<html>
<head>
<title>
</title>
<style type="text/css">
.contactLarge{
width: 250px;
height: 220px;
}
img.picture {
margin-left: 0px;
margin-bottom: 0px;
float: left;
}
.textbox {
float: left;
}
.contactLarge item{
}
</style>
</head>
<body>
<div class="contactLarge">
<div style="background-color:#C5CED8;clear:both">title </div>
<img class="picture" width="100" height="200" src="ContactBigLeftBorder.png" alt="">
<div class="textbox">
First, Last <br>
First, Last <br>
First, Last <br>
First, Last <br>
<div style="width:100%;font-weight:bold; float: left;">LastName, Firstname</div>
<div style="font-weight:bold;clear:both;" >CompanyName</div>
<div >Title</div>
<div >Work#</div>
<div >Mobile#</div>
<div >Home</div>
<div >email1</div>
<div >email2</div>
<div >email3</div>
<div >Street</div>
<div style="background-color:#F1F5F9; float:left;" >City,</div>
<div style="background-color:#F1F5F9; float:left;" >State</div>
<div style="background-color:#F1F5F9;" >Zip</div>
<div style="background-color:#F1F5F9; clear:left; float:left;" >httppage</div>
<div style="background-color:#F1F5F9; ">im</div>
</div>
</div>
</body>
</html>