I have the following html where I want the left div to show an image about 20% and the second div to contain text and take up the rest of the width. The problem I have is the second div gets pushed to the button when the image is added:
<div style="display:table; width: 100%; border: solid 1px blue;">
<div style="display: table-cell; width: 20%; max-height: 100%; border: solid 1px green; ">
<img src="http://lorempixel.com/400/200/" style=" width: 100%; height: 100%; border: 0;" />
</div>
<div style="dislay: table-cell; border: solid 1px red; vertical-align: top; top: 0; left: 0; ">
This is the area of the description
</div>
</div>
This example as you can see pushes the text to the bottom. But if I remove the image then all is well:
<div style="display:table; width: 100%; border: solid 1px blue;">
<div style="display: table-cell; width: 20%; max-height: 100%; border: solid 1px green; ">
No Image
</div>
<div style="dislay: table-cell; border: solid 1px red; vertical-align: top; top: 0; left: 0; ">
This is the area of the description
</div>
</div>
If I float the image to the left, it behaves properly but the table is not taking the whole width of the browser now
<div style="display:table; border: solid 1px blue;">
<div style="display: table-cell; width: 20%; max-height: 100%; border: solid 1px green; float: left; ">
<img src="http://lorempixel.com/400/200/" style=" width: 100%; height: 100%; border: 0;" />
</div>
<div style="dislay: table-cell; border: solid 1px red; vertical-align: top; top: 0; left: 0; ">
This is the area of the description
</div>
</div>
Here is my demo
I've tried different things but nothing seems to work. So if anyone can give me any tips, it would be appreciated.
You forget to add width:100% on the bottom div.
See this JSFiddle.
It should be like this:
<div style="display:table; width: 100%; border: solid 1px blue;">
<div style="display: table-cell; width: 20%; max-height: 100%; border: solid 1px green; float: left; ">
<img src="http://lorempixel.com/400/200/" style=" width: 100%; height: 100%; border: 0;" />
</div>
<div style="dislay: table-cell; border: solid 1px red; vertical-align: top; top: 0; left: 0; ">
This is the area of the description
</div>
</div>
Related
I'm trying to make a page like this and I've tried border radius but i just can't get it right. My border becomes too round and always looks off when the middle portion of the div starts to see the effects of border radius.
Pic below of What I want
How would I achieve this?
What I have
<div class="container-fluid">
<div class="row">
<div class="hidden-xs col-sm-6" style="border: 1px solid black; height: 100vh; padding: 0px; background-color: white">
<div class="image-container">
<img src="http://cdn.homedsgn.com/wp-content/uploads/2011/12/Flyway-View-House-00-1.jpg">
</div>
</div>
<div class="col-sm-6" style="border: 1px solid green; height: 100vh">
sign up field
</div>
</div>
</div>
css:
.image-container{
width: 100%;
height: 100%;
}
.image-container img{
height: 100%;
width: 100%;
object-fit: cover;
}
you also have the option to use an extra class and a pseudo to hide partially the image:
.image-container{
width: 100%;
height: 100%;
}
.image-container img{
height: 100%;
width: 100%;
object-fit: cover;
}
.rounded {
position:relative;
overflow:hidden;
}
.rounded:before {
content:'';
position:absolute;
top:-15vh;
bottom:-15vh;
right:0;
width:30vw;
border-radius:0 50% 50% 0/ 100%;
box-shadow:
15vh 0 white,
inset -3px 0 2px white /* inset is optionnal and buggy at screen .. tiny gap shows image in between both shadows */
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="row">
<div class=" rounded hidden-xs col-sm-6" style="border: 1px solid black; height: 100vh; padding: 0px; background-color: white">
<div class="image-container">
<img src="http://cdn.homedsgn.com/wp-content/uploads/2011/12/Flyway-View-House-00-1.jpg">
</div>
</div>
<div class="col-sm-6" style="border: 1px solid green; height: 100vh">
sign up field
</div>
</div>
</div>
well you could start with this :) off course different browser have different css for border
.image-container{
width: 100%;
height: 100%;
}
.image-container img{
height: 100%;
width: 800px;
object-fit: cover;
border-bottom-right-radius: 300px;
border-top-right-radius: 323px;
}
.box{
border: 1px solid green;
width: 500px;
background: white;
height: 200px;
display: inline-block;
position: absolute;
top: 190px;
left: 90px;
}
<div class="container-fluid">
<div class="row">
<div class="hidden-xs col-sm-6" style="border: 1px solid black; height: 100vh; padding: 0px; background-color: white">
<div class="image-container">
<img src="http://cdn.homedsgn.com/wp-content/uploads/2011/12/Flyway-View-House-00-1.jpg">
</div>
</div>
<div class="col-sm-6 box" style="border: 1px solid green; height: 100vh">
sign up field
</div>
</div>
</div>
<div class="outside" style="width: 500px; height: 20px; border: 1px solid red;">
<img src="" style="width: 10px; height: 20px; margin: 0; padding: 0; display: inline-block;">
<div id="here" style="display: inline-block; height: 15px; border: 1px solid blue; font-size: 7px;">11</div>
</div>
I found bottom line of img and #here do not in a line, if I add any text to #here, who can tell me why.
And how to make the #here and img verticall center in the outside (img and #here in the same line )
vertical-align is what you are looking for.
.outside > * {
vertical-align: middle;
}
<div class="outside" style="width: 500px; height: 20px; border: 1px solid red;">
<img src="http://www.fillmurray.com/20/10" style="width: 10px; height: 20px; margin: 0; padding: 0; display: inline-block;">
<div id="here" style="display: inline-block; height: 15px; border: 1px solid blue; font-size: 7px;">11</div>
</div>
Do you want it in the horizontal center?
#ImageCtr {
width: 10px;
height: 20px;
}
#outer {
width: 500px;
height: 20px;
background-color: #FF0000;
display: flex;
align-items: center;
justify-content: center;
}
<div id="outer">
<div id="ImageCtr"><img src="http://i.imgur.com/vCVDBHB.png">
</div>
</div>
How to I align text to the right side of the image icon like the one in the example picture.
I would usually use "float:left" but it's for a mobile responsive design so I prefer not using things like "float:left" because it ruins the red divs height with responsive designs.
I have to align the title, subsitle and a little square image.
It is easy to use float: left and NOT break the height of red border div.
You only have to add display: table-cell to the .app_top block. Here's the solution:
.app_top {
display: table-cell;
}
.app_top img {
float: left;
}
See the working example. Here's the code.
You could use display: inline-block instead.
#main-container {
border: 5px solid #3F3F3F;
width: 270px;
}
.container {
width: 250px;
height: 200px;
border: 5px solid #7F0008;
margin: 5px;
}
.box {
display: inline-block;
vertical-align: top;
width: 85px;
height: 85px;
background: #446C74;
margin: 5px;
}
.content {
display: inline-block;
vertical-align: top;
}
.title, .sub-title {
margin: 0;
padding: 3px 10px 3px 0;
}
.title {
font-size: 17px;
font-weight: bold;
}
.sub-title {
font-weight: bold;
color: #3F3F3F;
}
.img {
background: url(http://placehold.it/100/25);
width: 100px;
height: 25px;
border: 5px solid #EBEAAE;
}
<div id="main-container">
<div class="container">
<div class="box">
</div>
<div class="content">
<p class="title">Title</p>
<p class="sub-title">Sub-Title</p>
<div class="img"></div>
</div>
</div>
<div class="container">
<div class="box">
</div>
<div class="content">
<p class="title">Title</p>
<p class="sub-title">Sub-Title</p>
<div class="img"></div>
</div>
</div>
</div>
Maybe another option is to put the attribute in a parent div instead of the element
html:
<div id="wrapper">
<div class="twoColumn">
<img src="https://pbs.twimg.com/profile_images/444650714287972352/OXTvMFPl.png" />
</div>
<div class="twoColumn">
<p> this is a testingalot test</p>
<button> mybutton </button>
</div>
</div
css:
#wrapper{
border: 1px solid black;
}
.twoColumn{
width: 49%;
float:left;
border: 1px solid red;
}
button{
width: 50px;
height: 40px;
background: red;
}
img{
max-width: 100%;
}
http://jsfiddle.net/Equero/df2wvcet/
I hope it's help
Most simple solution would be to change your markup structure by wrapping your spans in a div just the way you did with the image, then add .app_top div{display:inline-block} .app_top div span{display:block}
.top{
width: 95%;
position: fixed;
background-color: #f7f7f7;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 3%;
padding-right: 3%;
border-bottom: 1px solid #b2b2b2;
}
.search{
width: 100%;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
border: none;
background-color: #e3e3e6;
}
.search::-moz-focus-inner {
border: 0;
padding: 0;
}
.items{
background-color: #ffffff;
width: 100%;
padding-top: 50px;
}
.app{
margin-left: 25px;
margin-right: 25px;
}
.app_top div{display:inline-block}
.app_top div span{display:block}
<div class="main">
<div class="top" >
<input type="text" class="search" />
</div>
<!-- Items -->
<div class="items" style="border: 1px solid black; padding-top: ">
<div class="app" style="border: 1px solid red;" >
<div class="app_top">
<div>
<img src="_img1.jpg" width="95"/>
</div>
<div>
<span class="app_txt" style="border: 1px solid aqua;"> text text - House text house! Las...</span>
<span class="ltd" style="border: 1px solid pink;"> textic-texttive ltd</span>
<span class="" style="border: 1px solid blue;"> </span>
</div>
</div>
<div class="app_bottom">
</div>
</div>
</div>
.content contains all text in right side. If you use overflow:hidden the height of div will stay normal.
img { float:left; }
.content { overflow:hidden; }
I have two Div Tag
I want Make them Side by side
right div fixed at width 200 and left div fill remained area but code dont work
here is my code
<div style="width: 100%;">
<div style="float: right; width: 200px; height: 100px; border: 5px dashed blue;position:fixed; "></div>
<div style="float: left; width: 100%; height: 100px; border: 5px dashed red; position: fixed;" ></div> </div>
You should probably not float and position:fixed your elements. Also inline css is BAD. Here is a working JSFiddle. Have a look at position:absolute; inside a position:relative;
Also I added box-sizing to make borders go inside their containers.
HTML
<div id="div_cont">
<div id="div2"></div>
<div id="div3" ></div>
</div>
CSS
*, *:before, *:after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
#div_cont{
position:relative;
width:100%;
height:100px;
padding-left:200px;
}
#div2{
border: 5px dashed blue;
position:absolute;
top:0;
left:0;
width:200px;
bottom:0;
}
#div3{
border: 5px dashed red;
min-height:100px;
}
you need to use margin property in css
see here
i have change some properties in your css
<div style="width: 100%;">
<div style="float: right; width: 200px; height: 100px; border: 5px dashed blue;position:fixed; "></div>
<div style="height: 100px; border: 5px dashed red; position: fixed; margin-right:200px;" ></div>
<div style="clear:both;"></div>
</div>
chk it and have a nice day
<div style="width: 100%;">
<div style="float: right; min-width: 200px; width:20%; height: 100px; border: 5px dashed blue; "></div>
<div style="float:left; width:79%;">
<div style="float: left; width: 100%; height: 100px; border: 5px dashed red;" ></div>
</div>
</div>
in CSS3 is possible. But be careful with the position:fixed
<div style="width: 100%; height: 100px; border: solid thin green; ">
<div style="float: right; width: 200px; height: 100px; border: 5px dashed blue; "></div>
<div style="float: left; width: calc(100% - 220px); height: 100px; border: 5px dashed red; ">
</div>
I have a three rows CSS table, which is nested in a fixed size div. The table has three rows, the height of first two rows is defined by the contents (I can't give any explicit sizes) and the last row simply takes what's left. The last row has a single child, which is a div, having loads of child divs with display: inline-block. The problem I have is - I the div is always overflowed and I want it to display a vertical scrollbar, which only happens in Chromium. FF & Opera simply ignore overflow-y:scroll and let the content run down (I belive IE is the same I just don't have it). I wonder if the problem can be solved without using javascript and if so how.
I don't mind using HTML5 only solution as long as it's supported by the recent versions of all browsers.
Update 1 - Just wanted to make it clear - I can't use explicit sizes for any of the rows as they host controls of unknown height.
<html>
<body>
<div style="width: 500px; height: 300px;">
<div style="display: table; width: 100%; height: 100%; position: relative; border: 1px solid #ccc;">
<div style="display: table-row;">
<div style="display: table-cell; background-color: #ccc;">Test</div>
</div>
<div style="display: table-row;">
<div style="display: table-cell; background-color: white;">Filter</div>
</div>
<div style="display: table-row;">
<div style="display: table-cell; height: 100%;">
<div style="height: inherit; overflow-y: scroll">
<div style="display: inline-block; width: 150px; height: 150px; vertical-align: middle; border: 1px solid #ccc;">A0</div>
<div style="display: inline-block; width: 150px; height: 150px; vertical-align: middle; border: 1px solid #ccc;">A1</div>
<div style="display: inline-block; width: 150px; height: 150px; vertical-align: middle; border: 1px solid #ccc;">A2</div>
<div style="display: inline-block; width: 150px; height: 150px; vertical-align: middle; border: 1px solid #ccc;">A3</div>
<div style="display: inline-block; width: 150px; height: 150px; vertical-align: middle; border: 1px solid #ccc;">A4</div>
<div style="display: inline-block; width: 150px; height: 150px; vertical-align: middle; border: 1px solid #ccc;">A5</div>
<div style="display: inline-block; width: 150px; height: 150px; vertical-align: middle; border: 1px solid #ccc;">A7</div>
<div style="display: inline-block; width: 150px; height: 150px; vertical-align: middle; border: 1px solid #ccc;">A8</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Here's the solution (overflowed div has to be positioned absolutely and wrapped in another relatively positioned one):
<html>
<body>
<div style="width: 500px; height: 300px;">
<div style="display: table; width: 100%; height: 100%; position: relative; border: 1px solid #ccc;">
<div style="display: table-row;">
<div style="display: table-cell; background-color: #ccc;">Test</div>
</div>
<div style="display: table-row;">
<div style="display: table-cell; background-color: white;">Filter</div>
</div>
<div style="display: table-row;">
<div style="display: table-cell; height: 100%;">
<div style="position: relative; width: 100%; height: 100%;">
<div style="overflow-y: scroll; position: absolute; top: 0px; right:0px; bottom: 0px; left: 0px;">
<div style="display: inline-block; width: 150px; height: 150px; vertical-align: middle; border: 1px solid #ccc;">A0</div>
<div style="display: inline-block; width: 150px; height: 150px; vertical-align: middle; border: 1px solid #ccc;">A1</div>
<div style="display: inline-block; width: 150px; height: 150px; vertical-align: middle; border: 1px solid #ccc;">A2</div>
<div style="display: inline-block; width: 150px; height: 150px; vertical-align: middle; border: 1px solid #ccc;">A3</div>
<div style="display: inline-block; width: 150px; height: 150px; vertical-align: middle; border: 1px solid #ccc;">A4</div>
<div style="display: inline-block; width: 150px; height: 150px; vertical-align: middle; border: 1px solid #ccc;">A5</div>
<div style="display: inline-block; width: 150px; height: 150px; vertical-align: middle; border: 1px solid #ccc;">A7</div>
<div style="display: inline-block; width: 150px; height: 150px; vertical-align: middle; border: 1px solid #ccc;">A8</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>