RE this on eBay: http://www.ebay.com/itm/281670060888
On my own site (at http://sallymilo.com/template-din.html) and when running on my own computer, the right side div aligns to the top of the left side div, but when I put it on eBay, the right side div is below the left - even if I make the tabbed section 200 pixels narrower.
A bit of the main CSS:
.row1 {
width: 100%;
position: relative;
float: left;
background: url(https://myimagefiles.com/dinnerman/tbg.png);
}
.row1l {
width: 26%;
position: relative;
margin-left: 2em;
float: left;
}
.row1r {
width: 64%;
position: relative;
margin-left: 2em;
margin-right: 2em;
float: left;
}
And a bit of the tabbed section CSS:
.tabholder {
width: 100%;
height: 14em;
font-size: 16px;
}
/* base font size for em-scaling */
.tabholder div.tabtops {
width: 100%;
max-width: 550px;
}
The issue is that in ebay the width of the container is lower than 1000px.
The because of the fact that your inner sections with hardcoded widths they break.
I suggest you to use width with %, in that way not matter what will be the with of the container the inner sections will take the number of the percentage that you gave.
.container {
margin: 20px;
background-color: rgba(0,0,0,0.2);
overflow: hidden;
}
.col-1 {
width: 20%;
background-color: rgba(0,0,0,0.2);
float: left;
}
.col-2{
width: 80%;
background-color: rgba(0,0,0,0.5);
float: left
}
<div class="container">
<div class="col-1">col-1</div>
<div class="col-2">col-2</div>
</div>
Related
I have 3 divs, main, right and left. The main div contains the right and left div and I want to align the right and left div side by side. I have read few posts here but have not been able to get the desired results.
https://jsbin.com/lagikaxiwe/edit?html,css,output
html,
body {
margin: 0;
padding: 0;
}
div#main-content {
background-color: bisque;
height: 100%;
}
div#right-content {
position: relative;
width: 35%;
height: 100%;
background-color: #ffffff;
}
div#left-content {
position: absolute;
width: calc(100% - 35%);
height: 100%;
margin: 0px 0px 0px 666px;
background-color: #00aeef;
}
<div id="main-content">
<div id="right-content">
</div>
<div id="left-content">
</div>
</div>
The simplest method nowadays to use display: flex on the container. Have a look at the settings in my snippet - I erased a lot of the other settings, which are not necessary...
html,
body {
margin: 0;
padding: 0;
height: 100%;
}
div#main-content {
background-color: bisque;
height: 100%;
display: flex;
}
div#right-content {
width: 35%;
height: 100%;
background-color: red;
}
div#left-content {
width: 65%;
height: 100%;
background-color: #00aeef;
}
<div id="main-content">
<div id="right-content">
</div>
<div id="left-content">
</div>
</div>
html,
body {
margin: 0;
padding: 0;
}
div#main-content {
background-color: bisque;
height: 100%;
width: 100%;
}
div#right-content {
float: left;
width: 35%;
height: 100%;
background-color: #ffffff;
}
div#left-content {
width: calc(100% - 35%);
height: 100%;
background-color: #00aeef;
float: left;
}
I would personally use display:inline-block to align the left and right divs
side by side and add the necessary widths to add up to 100% of the parent width. Be sure to use font-size:0 on the parent to eliminate the white space between the left and right divs so they sit next to each other correctly.
Be sure to assign font-sizes to your left and right content so your content actually shows up!
This method is largely backwards compatible with all browsers.
div#main-content{
font-size:0;
}
div#left-content{
display:inline-block;
vertical-align:top;
width:65%;
}
div#right-content{
display:inline-block;
vertical-align:top;
width:35%;
}
I am new to CSS. I am building a webpage that will have 3 columns - the left one for navigation, the middle one for page content and the right one for external links and notes. First when I went with width in percentage, the overflow was working. Now the overflow is not working as well as the right border got disappeared. Here is my code. Please help me out. Thanks in advance.
//Total pixels: 1366px. (I found this after running a given code on www.w3schools.com).
#rightcontentborder {
border: 2px solid;
padding: 5px;
/* border-radius: 1em;*/
//Left-margin = 1366 - 716 = 650px.
margin-left: 650px;
margin-right:1366px;
// width:50px;
height:700px;
// overflow:scroll;
float: right;
position: absolute;
}
#maincontentborder {
border: 2px solid;
padding: 5px;
// background: #dddddd;
margin-left: 216px;
//Given width=500px.
//Right-margin = 1366 - (216+500) = 1366-716 = 650px.
margin-right: 650px;
// width: 100px;
height: 700px;
overflow: scroll;
// float: center;
}
#leftcontentborder {
border: 2px solid;
padding: 5px;
// background: #dddddd;
/* border-radius: 1em;*/
margin-left:0px; /*I have added this line to adjust the left margin of the LEFT content*/
margin-right:1150px; /*I have added this line to adjust the right margin of the LEFT content*/
//Width = 1366-1150 = 216px.
height:700px;
// float: left;
position: absolute;
}
If I got your requirement accurately, you need 3 column page. The css is not accurate you have written. You have to use float for achive this. Lets see the expected html
<div class="container">
<div class="left-content">
<!-- left sidebar content -->
</div>
<div class="main-content">
<!-- main content -->
</div>
<div class="right-content">
<!-- right sidebar content -->
</div>
</div>
Lets assume that the widths of the divs are 300px, 600px and 300px relative to left, main and right.
.container {
overflow: hidden;
width: 100%;
max-width: 1200px;
}
.left-content {
width: 25%;
max-width: 300px;
float: left;
min-height: 700px;
}
.right-content {
width: 25%;
max-width: 300px;
float: left;
min-height: 700px;
}
.main-content {
width: 50%;
max-width: 600px;
float: left;
min-height: 700px;
}
Try to understand the usage of css relative to the html. And customize with your dimensions. good luck.
I am currently developing my own website. The first div container integrates a image to html. The second div with the classname "face" should show up directly beneath the image. It contains a text with predefined width and height.
Now the problem: It does not show up on the right of the image div. How can I show it on the right side?
.face {
text-align: center;
background-image: linear-gradient(rgb(0, 21, 166), #115FD8);
border-radius: 5px;
width: 240px;
height: 80px;
margin-right: 0 !important;
}
.start {
margin-right: 10px;
}
.postpreview {
position: relative;
width: auto;
}
.one-half {
float: left;
width: 48.717948717948715%;
margin-left: 2.564102564102564%;
}
<div class="one-half start postpreview">
<a href="#">
<img src="http://vocaloid.de/wp-content/uploads/2015/02/KAITO-6th-anniversary-2015-Project-DIVA-Arcade-Diamond-Dust-750x256.jpg" class="attachment-Beitragsbild wp-post-image">
</a>
</div>
<div class="face">Facebook
</div>
This should help. http://jsfiddle.net/13m3vbu1/3/
Insert into your css:
.face {
text-align: center;
background-image: linear-gradient(rgb(0, 21, 166), #115FD8);
border-radius: 5px;
width: 240px;
height: 80px;
float: left;
margin-right: 0 !important;
}
.one-half {
float: left;
width: 48.717948717948715%;
margin-left: 2.564102564102564%;
margin-right: 10px;
}
.one-half > a {
display: block;
width: 100%;
overflow: hidden;
}
I removed the redundant CSS that isn't needed as well.
If you just want the div with a class face to show on the right side of div one-half use float: left and instead of using pixels in .face use percent it's more flexible
CSS
.one-half {
float:left;
width: 45%; //adjust in what % you want
display: inline;
}
.face {
float: left;
width: 45%; //adjust in what % you want
display: inline;
}
I'm trying to layout a screen using div's and CSS. It's a simple layout at this point but I can't seem to get the div's to line up. I want one wrapper div with two div's within it: one aligned to the left and one aligned to the right. However, they end up on top of each other.
I know this question is simple. What am I missing here?
If I reduce the width of the right div to 60% it lines up right but shouldn't I be able to use 100% of the width of the parent div?
#product_wrapper {
display: inline-block;
height: 75%;
width: 75%;
background-color: white;
text-align: top;
margin: 0 auto;
}
#images_wrapper {
background-color: red;
display: inline-block;
height: 100%;
width: 30%;
margin: 0;
padding: 0;
}
#content_wrapper {
background-color: blue;
display: inline-block;
height: 100%;
width: 70%;
margin: 0;
padding: 0;
}
<div id="product_wrapper">
<div id="images_wrapper">Foo</div>
<div id="content_wrapper">Bar</div>
</div>
Float left your children elements:
jsBin demo
#product_wrapper > *{float:left;}
Note that inline-block causes the inner elements to actually act like inline elements
where white spaces count!
SO another way would be to modify your HTML removing the NewLine separator:
jsBin demo
<div id="images_wrapper">
Foo content
</div><div id="content_wrapper">
^^-------------------------------------- no space here
Bar content
</div>
The third way (the worst one) is to set font-size to 0 for the parent (will remove logically the child's white-space gap since is now '0'); >> and than reset the font-size for children elements to px (cause em will not work since parent has 0).
But that's a good way to loose track of dynamic and responsive font sizes expecially if you use em and size inheritances.
The problem is the whitespace in the html, which occupies some space between the elements.
One way of fixing it is
#product_wrapper {
font-size: 0; /* Hide whitespace in the html */
}
#images_wrapper, #content_wrapper {
font-size: 16px; /* Reset to whatever vaue */
}
#product_wrapper {
display: inline-block;
height: 75%;
width: 75%;
background-color: white;
text-align: top;
margin: 0 auto;
font-size: 0;
}
#images_wrapper, #content_wrapper {
font-size: 16px;
}
#images_wrapper {
background-color: red;
display: inline-block;
height: 100%;
width: 30%;
margin: 0;
padding: 0;
}
#content_wrapper {
background-color: blue;
display: inline-block;
height: 100%;
width: 70%;
margin: 0;
padding: 0;
}
<div id="product_wrapper">
<div id="images_wrapper">Foo</div>
<div id="content_wrapper">Bar</div>
</div>
Use float:left instead of display:inline-block
#product_wrapper {
display: inline-block;
height: 75%;
width: 75%;
background-color: white;
text-align: top;
margin: 0 auto;
}
#images_wrapper {
background-color: red;
float:left;
height: 100%;
width: 30%;
margin: 0;
padding: 0;
}
#content_wrapper {
background-color: blue;
float:left;
height: 100%;
width: 70%;
margin: 0;
padding: 0;
}
<div id="product_wrapper">
<div id="images_wrapper">Foo</div>
<div id="content_wrapper">Bar</div>
</div>
I'm having trouble getting my layout working correctly, I have a main div and a sidebar div these are both float: left if the screen size is resized or if its viewed on screen smaller that what I have designed on (1920x1080) then the sidebar div drops below the main content.
I tried placing a wrapper around each div, but this has no effect.
<div id="header">
[Header]
</div>
<div id="content">
[Content]
</div>
<div id="sideBar">
[SideBar]
</div>
<div id="footer">
[Footer]
</div>
body
{
width: 100%;
color: #000000;
background-color: #000000;
margin: 0;
padding: 0;
}
#header
{
width: 100%;
height: 110px;
background-color: #336699;
color: #FFFFFF;
margin: 0px;
padding: 0px;
}
#content
{
float: left;
margin-left: 50px;
width: 70%;
height: 700px;
margin-top: 40px;
padding: 30px;
background-color: #FFFFFF;
margin-bottom: 40px;
}
#sideBar
{
float: left;
margin-left: 50px;
width: 15%;
height: 400px;
margin-top: 40px;
padding: 30px;
background-color: #FFFFFF;
}
#footer
{
width: 100%;
height: 80px;
background-color: #174555;
margin: 0px;
padding: 0px;
color: #ffffff;
clear: both;
}
Basicly both div's should resize until a certain size is reached, then scrolling should be enabled. I'm pretty sure I have done something simple wrong but i'm not much of a design person.
Example can be shown here : Link
Thanks for any advice :)
Karpie's right.
Also why not simply start out with one main div, say measuring 1000px in width, then work within that? If you can't do that then choose a measurement type, like px, and stick with for the widths, padding and margins of those elements. At least that would make it easier to do your math and know how much space you do or don't have.
I generally stick to relative measurements, like pixels (I don't like absolutes, it's personal. :P).
EDIT
Ok, try this, add a wrapper around the entire page (just to test, so bear with me). Give that wrapper an id of like #main-body or something, and define a width. Set the widths of the content and sidebar. If you minimize the screen, the sidebar shouldn't fall below the content div. It wil go outside the view port, though.
/* Wrap all in #main-body with specified width */
#main-body{
width:1000px;
margin:0 auto;
}
/* give these elements a relative width */
#content
{
float: left;
margin-left: 50px;
width:600px;
height: 700px;
margin-top: 40px;
padding: 30px;
background-color: #FFFFFF;
margin-bottom: 40px;
}
#sideBar
{
float: left;
width:100px;
margin-left: 50px;
height: 400px;
margin-top: 40px;
padding: 30px;
background-color: #FFFFFF;
}
Sorry for the length of this. :P
You're mixing up percentages and pixels. 70% width + 30px padding + 50px margin (all on content) + 50px margin + 15% width + 30px padding (all on sidebar) can add up to more than 100%.