I have two divs in my application. How can I make my left div to fit all space till right div. Right one can be text or image with any width.
<div id="header" class="header">
<div class="logo">
<img src="/Content/images/my_logo.png" alt="" />
</div>
<div class="logoClient">
Test Client /*here can be text or image with ANY SIZE */
</div>
<div class="clear"></div>
</div>
In this example I've done with fixed widths(700px and 200px), but this is wrong, because right one's text is dynamic and I want to left green bar be dynamic too.
http://jsfiddle.net/C5GL6/1/
Another approach with table, table-cell css options... but again... can't make left green bar fit all space.
http://jsfiddle.net/sjfQj/
How can I achieve this?
Remove width and add float:left to both the divs
.header
{
width: 950px;
font-family:Helvetica, Arial, sans-serif;
display:table
}
.logo {
height: 55px;
padding: 10px 20px;
background: #004B35;
display:table-cell;
}
.logoClient
{
display:table-cell;
height: 55px;
line-height: 55px;
padding: 10px 0px;
margin:0px -10px 0px 0px;
font-size: 30px;
color: #004B35;
overflow:hidden;
font-weight: bold;
text-align: right;
background: red;
}
DEMO Updated
Remove the width size in div
Edited fiddle
http://jsfiddle.net/C5GL6/2/
.logo {
float: left;
height: 55px;
padding: 10px 20px;
background: #004B35;
}
Related
I have two columns 41% and 59% of the total screen width each. The height of the columns is 1102px.
In the first column I have 4 divs. The first one is for the navigation and it can be maximum 60px. The second one is for a logo I am using. The third one is for text and the fourth one is the trickiest one. I am using an image which does not have the same size and ratio. I want the image to get the 100% of the width.
My challenge is to get the height of the first image and the text divs to be dynamic depending on the heigh of the bottom image in the first column. For example, the margins are really big when the screen size is big :
body{
color: #fff;
font-family: Arial;
}
.wrapper{
background-color: #484848;
}
#col1{
float:left;
width:41%;
height: 1102px;
background-color: #E90649;
position: relative;
}
img#productImg{
width:100%;
height:auto;
}
img#product{
max-width:100%;
}
#col2{
float: left;
width:59%;
height: 1102px;
background-color: #124;
}
div #centerText{
width: 70%;
margin: 0 auto;
height:455px;
}
#productLogo{
margin-top: 2%;
margin-left: auto;
margin-right: auto;
display: block;
max-width: 70%;
}
.list {
padding-right: 14px;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
li {
display: inline;
padding-left: 4px;
color: #000;
font-size: 18px;
font-weight: lighter;
}
div.nav{
padding-top: 3%;
height:24px;
padding-left: 5%;
}
#productImg img{
width:100%;
position: absolute;
bottom: 0;
left: 0;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="wrapper">
<div id="col1">
<div class="nav">
<ul>
<li>HOME</li>
</ul>
</div>
<img id="productLogo" src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-logo.png?v=9c558ec15d8a"/>
<div id="centerText">
<h1>#############</h1>
<p2>#############</p2>
<h3>#############</h3>
</div>
<div id="productImg"><img src="https://www.w3schools.com/css/img_fjords.jpg" /></div>
</div>
</div>
<div id="col2">aaaaaaaaa</div>
</body>
</html>
I used the #media screen-size feature but still I am not happy with the results as I have to put many lines in the CSS. Ideally, the part with the first logo (stackoverflow) and the text will be vertically aligned to center and the padding-top, padding-bottom will have the same value (percentage). The height of this div will depend on the height of the bottom image (JS parsing possible here?) and thus the text can be dynamic using the vw or vh in the CSS.
Is there an easier way to align the divs in the column and keep everything without breaking (that was the initial problem)?
I'm trying to create a "tile" (square block) with content centered perfectly in the middle of it.
Here's the HTML
<div class="tile-facebook">
<h5>Facebook</h5>
<div class="tile-notification">4</div>
<h4>notifications</h4>
</div>
And the CSS
.tile-facebook{
width:175px;
height:175px;
background: #3b5998 ;
text-align: center;
border-radius: 10px;
border-style: solid;
border-color: #ccc;
border-width:1px;
color: white;
}
.tile-notification{
font-size:80px;
font-weight:bold;
padding:10px 0px;
}
I've got the text in the middle of the block, however I want it to be directly in the middle with the same padding from the top and bottom. Thoughts?
You might not set the height , but use a pseudo or extra element to draw your square from any width of your boxe.
vertical padding at 100% + inline-block is a way to draw a square and add content in its middle.
<div class="tile-facebook">
<div class="wrapper">
<h5>
Facebook
</h5>
<div class=" tile-notification ">
4
</div>
<h4>
notifications
</h4>
</div>
</div>
.tile-facebook {
width:175px;
background: #3b5998;
text-align: center;
border-radius: 10px;
border-style: solid;
border-color: #ccc;
border-width:1px;
color: white;
}
.tile-notification {
font-size:80px;
font-weight:bold;
}
.tile-facebook .wrapper * {
margin:0;
}
.tile-facebook:before {
padding-top:100%;
content:'';
}
.tile-facebook:before,
.wrapper {
display:inline-block;
vertical-align:middle;
}
http://jsfiddle.net/cnq82/
some explanation about vertical % padding or margin : http://www.w3.org/TR/CSS2/box.html#padding-properties & http://www.w3.org/TR/CSS2/box.html#propdef-margin-top
So, (hope it makes it a bit more clear : ) )
If you give a vertical padding of 100% its height will be equal to width of parent.
If you want height to be taller of 20px you can do : padding:100% 0 20px 0 ; or padding:20px 0 100% 0;
If you want a box with a ration of 4:3 , just do padding-top:75%; or padding:50% 0 25% 0;.
pseudo or extra element can be floatting, or inline-block for vertical alignment.
You do not need to set a width in parent's CSS.
This fix tequires that the contents height never changes, and you need to add another <div>.
<div class="tile-facebook">
<div class="center">
<h5>Facebook</h5>
<div class="tile-notification">4</div>
<h4>notifications</h4>
</div>
</div>
And add the CSS:
.title-facebook {
position: relative;
}
.center {
position: absolute;
top: 50%;
margin-top: -[half height];
left:0;
width: 100%;
}
Where [half height] is half the height of the .center div.
Add margin: -30px; to your CSS here:
.tile-notification {
font-size:80px;
font-weight: bold;
padding: 10px 0px;
margin: -30px;
}
i have two div like this :-
<div class="pdetails">
<div class="contact_details">
text
</div>
<div class="clear"></div>
<div id="contact_area_form_" class="tform_wrapper">
text
</div>
</div>
the parent div is pdetails and it have two div (contact_details,tform_wrapper),my problem is the div contact_details show in top and the div tform_wrapper show in bottom.
how can i set this two div in the same line.
css code :-
.tform_wrapper {
float: left !important;
padding-top: 10px;
width: 510px;
}
.pdetails {
color: #000000;
font-family: tahoma;
font-size: 12px;
line-height: 18px;
margin-top: 20px;
min-height: 360px;
text-align: justify;
}
.contact_details {
float: right;
}
Remove div which have "clear" class or hide this with display:none.
<div class="pdetails">
<div class="contact_details"> text </div>
<div id="contact_area_form_" class="tform_wrapper"> text </div>
</div>
or use width in % value.
.tform_wrapper {
float: left !important;
padding-top: 10px;
width: 80%;
}
For me they show up in one line. Only when the window size is not big enough for both of them to fit, they will be shown in a vertical alignment. You could give the parent-div a fixed width to avoid that problem. Then in case of a small window size a scrollbar would show up.
I would go something like this: http://jsfiddle.net/Ewyzt/
the clear in between is the one saying there cant be more on this line and pushed the other box down what you want to do is clear after the last box so you can build after the two first boxes otherwise things will start to float u besides them.
.tform_wrapper {
padding-top: 10px;
width: 510px;
background: red;
}
.pdetails {
color: #000000;
font-family: tahoma;
font-size: 12px;
line-height: 18px;
margin-top: 20px;
min-height: 360px;
text-align: justify;
}
.contact_details {
float:left;
}
I would like to suggest to use display: inline-block; property instead of float
Demo for display: inline-block
Hey guys I am having trouble with keeping things aligned on my website. Here is an example of what the website should look like:
Now, here is where it makes unaligned.. When I resize the window to be smaller, the Text shifts over like so:
Currently these are the css attributes applied to my tag which is on the text.
#header_title_container {
width: 1000px;
margin: 0px auto;
padding-left: 85px;
padding-top: 50px;
}
#header_title {
font-size: 33px;
color: #FFFFFF;
font-weight: bold;
}
What would the proper way to approach always having "Title" aligned with the corner of the darkest gray box?
Thanks.
Because your title container has padding inside it, the text "Title" is kept at least 85px from the screen edge. Because it's left-aligned, that means its left-hand edge is always at 85px.
So, when your sidebar gets smaller than 85px, the text cannot align with it.
You could fix this by fixing the size of the sidebar, by eliminating the padding-left directive and replacing it with an element sized as the sidebar is (or replacing it with the same amount as your sidebar width!), or by setting min-width on the sidebar.
Is this the kind of result you are after?
http://jsfiddle.net/2ScZZ/5/
html
<div id="container">
<div id="header_title_container">
<div id="sub_header_title_container">
<div id="header_title">
Title
</div>
</div>
</div>
<div id="middlebit">
</div>
</div>
css
#container {
background-color: lightgray;
}
#header_title_container {
width: 100%;
background-color: black;
}
#sub_header_title_container {
width: 900px;
margin: auto;
padding-right: 20px;
}
#header_title {
font: 33px verdana;
color: white;
padding: 50px 0 10px 0;
}
#middlebit {
margin: 0px auto;
width: 900px;
height: 100px;
background-color: gray;
}
<div id="content">
<div id="outer">
<div id="header">Transport</div>
<div id="image">
<img src="../images/img1.jpg" style="width:300px;height:300px"/>
</div>
<div id="right_content">large amount of text</div>
</div>
</div>
For the above the css used is:
#content {
width: 100%;
min-height: 600px;
overflow: hidden;
border: 1px solid;
padding: 0;
margin: 0;
}
#outer {
border: 1px solid;
float: left;
overflow: hidden;
width: 100%;
min-height: 200px;
}
#header {
border: 1px solid;
width: 100%;
height: 20px;
background-color: #006A4D;
color: #ffffff;
padding: 10px;
font: normal 14px Helvetica, Arial, sans-serif;
line-height: 18px;
clear: both;
overflow: auto;
}
#right_content {
border: 1px solid;
overflow: hidden;
min-height: 300px;
padding: 10px;
float: left;
background-color: orange;
font: normal 12px Helvetica, Arial, sans-serif;
line-height: 18px;
}
#image {
border: 1px solid;
min-width: 300px;
min-height: 300px;
padding: 10px;
float: left;
overflow: hidden;
}
Both the inner divs are float:left. But the output comes as one div below the other. How can I get them to appear side by side?
Works fine for me at http://jsfiddle.net/gaby/zv4zG/
The thing to keep in mind is that if you do not specify widths for the floated elements, and they grow in size in order to accommodate their contents, they may reach a size (when added) that exceeds their container width. At that point they will break and one will go below the other.
So, you have to ensure that their added widths (and horizontal paddings and margins) will never exceed their containers width.
the outer div has a 100% width, witch tells the browser to ocupy all the available width, that's why the second div drops beneath.
The solution is simple, make sure both divs have enough width to be able to be side by side.
You don't need to float the #right_content, just add a left margin wide enough to accommodate the image and drop the overflow:
#right_content{
border: 1px solid;
min-height: 300px;
padding: 10px;
margin-left: 322px;
background-color: orange;
font: normal 12px Helvetica, Arial, sans-serif;
line-height: 18px;
}
Live example: http://jsfiddle.net/ambiguous/8m3LS/
I gave #image and #outer a width and #right_content a negative margin to account for the #image's space.
jsFiddle: http://jsfiddle.net/stealthyninja/Hn2Et/
DIVs are block-level elements, meaning that they will stack vertically by default. In order to make them appear side-by-side, you will also need to set display: inline; in your CSS.
UPDATE
I just created this jsfiddle and it looks like your layout is fine... not sure what the issue is. Could it be browser specific?
As we give width to one of the div, it leaves the extra space for next div, but make sure the width of both divs do not exceeds the browser's width, otherwise the second div will move below the first div. this css worked for me:
#left{
display:inline;
width:50%;
float:left;
}
#right{
float:left;
}
<div id="left">
left div
</div>
<div id="right">
right div
</div>