I want to modify CSS or do a javascript for success two conditions:
Example:
(------------------main div-----------------------------)(------right div -----)
Conditions:
1) If there are a div in the right of my main div, display my main div like the example.
2) If the right div dont exist, my main div must get all width.
I can set width with a determinated size but this dont meet all conditions.
Somebody can help me?.
This is already answered here : 2 column div layout: right column with fixed width, left fluid
Use width:auto and overflow:hidden css styles for your main div so that it takes only the required width.
Example HTML :
<div class="right">
right div fixed width
</div>
<div class="left">
left main div flexible width
</div>
CSS :
.right {
width: 180px;
float: right;
background: #aafed6;
}
.left {
width: auto;
background:blue;
overflow: hidden;
}
Related
I am currently working on a single page application with angular-js. I have specific routes where I want to inject some new html templates.
To do this I created a container called with id #main which is located between two navbars (header and footer). In addition I have an image as background which is included in a seperate div above all other html elements in body.
So the structure looks like this:
<body ng-controller="mainController">
<div id="background"></div>
<div id="navbar-override" ...> ... </div>
<div id="main" ng-view></div>
<div id="navbar-bottom-override" ...> ... </div>
</body>
My question now is: The #main div should always stay at the same height and width (full available h&w) over the whole page. I have a picture where I describe how the #main div should behave with the rest of the page. How can I achieve this alignment?
P.S.: This is the css of the html tag:
html {
height: 100%;
width: 100%;
padding: 65px;
}
Your #main div should natively stretch to the width of the screen (minus the 65px padding on each side coming from the html, although I would remove that padding and put it as margin on the #main since it looks like you want the header and footer to stretch full). If you want to force the height of #main to the screen height you should be able to set its height to 100vw minus the heights of your header and footer. If your header and footer are each 50px height:
#main {
height: calc(100vw - 100px);
padding-left: 65px;
padding-right: 65px;
}
You have to define style for your main:
#main{
width: ---something-----;
height: ---something-----;
display:block;
}
Then you probably want deal with overflow content. See ,w hat it does: http://www.w3schools.com/cssref/pr_pos_overflow.asp
You may also use css capability of calculating the dimensions:
height: calc( 100% - 100px );
where 100px would be combined height of your header and footer, as an example.
I have a lot of thumbnails in my page: I want them to be centered, but the last line looks awful while resizing and I have something like one or two orphan images floating in the center of the page.
The last line should be left-aligned.
How to do it?
I tried to insert another div with "margin:0 auto 0 auto;" but it doesn't work.
https://jsfiddle.net/4hw4fkm9/
What I try to have:
<div style="text-align:center;">
<img />
<img />
<img />
<img />
etc..
</div>
You should use CSS for this, not the HTML attribute "align", which is pretty old school. You can either float the images left, in which case they will stack to the left, or you could set all the images to display: inline-block, then use text-align: center on their container element (the div in this case).
Here are some references:
http://www.w3schools.com/css/css_float.asp
http://www.w3schools.com/cssref/pr_class_display.asp
I'm not sure if this is what you're looking for - as you mention that you both 'want them centered' but want them left-aligned, too.
What you can do is create another div that will act as a container, set width: 100% on the main div, set the width slightly lower on the container div and set margin: 0 auto; on the container. Then make the images relatively positioned with left:0;.
See Updated Fiddle Here. Is this what you're after?
EDIT: Re-Updated Fiddle for my attached comment. You can use set pixel values on the main and container div to account for the set pixel width of the thumbnails + any spacing that occurs.
Using the selectors in the fiddle.
.center {
text-align:center;
background-color:red;
margin:0 auto;
padding:0 20px;
}
.center:after{
content:'';
display:table;
clear:both;
}
img {
width: 100px;
height: 100px;
float:left;
}
From there the .center element would need a width of some multiple of 100px to include a fixed number of imgs. I added padding to make it look closer to the picture you provided.
This is my html:
<div id="cobcContainer" class='floatLeft' style="width: 50%">
<p id="containerText">Random long text here. This text takes up two lines when it is inside it's container div (inside cobcContainer).</p>
<a class="square bookIcon" href="/"></a>
</div>
In the CSS (there is a style.css which I do not have access to) the
<a class="square bookIcon" href="/"></a>
has a background image and the width of it is 100px.
There is not any other CSS in this. When I view the webpage, the container is 50% and the text appears first and then the link / icon appears below it. How do I make the link / icon appear to the right of the text (make the text aligned to the left of the icon / link)? I need this to be a responsive design so I am trying to use percentages here (other than the link / icon which has a fixed width of 100px).
JQuery / JS can be used.
Note: I am not allowed to use
<table>
tags nor
display: table-cell
(these rules were set by the corporation).
p is a block level element, so any element after it will be below it. and as you have defined 100px width for a tag,
1) you can do this,
#containerText{
display:inline-block;
}
and define some width to it.
2) Or simply put
.square { float:left; }
This will float to the left and a tag will just come beside it.
Are you looking for something like this? http://jsfiddle.net/swm53ran/63/
You can use
#containerText {
display:inline-block;
}
And in tandem (not necessary) to push the link to the right side of the div:
.bookIcon {
float:right;
}
If float:right isnt used, then the link will be on the right, right next to the text
You can set the width of p tag using calc and add a float: left to the anchor tag.
a.square {
width: 100px;
display: block;
height: 10px;
float: left;
}
p {
float: left;
width: calc(100% - 100px);
margin: 0;
}
Fiddle
I have a set of child divs inside a parent div that has a set width. The elements are put together using isotope but I am not using an isotope layout mode as they were not working for me in terms of spacing.
What I am trying to do is have divs that fill the space of the parent so at the far right there are no gaps and that each div has a margin and padding. So far its working alright like so:
As you can see the divs have the correct margin right and top but what i want to do is stop the margin on the last items of each row. The issue here is that some of the divs have a different width. The alignment should but the same point as the top right box as you can see in the image.
The css I used is as follows:
.global-post{
padding: 0;
height: 400px;
float: none;
display: inline-block;
*display: inline;
zoom: 1;
vertical-align: top;
width: 308px;
}
This creates the width of the narrower items and then the projects that are wider have different width values.
Can anyone point me in the right direction for a fix for the issue?
Give a negative left margin to row like margin-left: -20px and add left margin to every div inside that row like margin-left: 20px;
<div class="row">
<div class="span">1</div>
<div class="span">2</div>
<div class="span">3</div>
<div class="span">4</div>
</div>
<div class="row">
<div class="span">1</div>
<div class="span">2</div>
</div>
.row{
margin-left: -20px;
}
.span{
margin-left: 20px;
}
I got a div which contains 2 other divs. They are vertically aligned. Now, the lower div is changing its size via javascript. What I want now is that the upper div is changing its size depending on the other divs size. Is there a way to do this with css style only, without using js?
UPDATE: The outer div has a fixed size.
<div>
<div> childdiv 1</div>
<div> childdiv 2</div>
</div>
UPDATE: Ok I didnt make this clear enough, the lower box is changing its height in top direction. And the upper div should then decrease its height.
You could use display:table and display:table-row to change the height of the upper div accordingly, so that the total height matches the fixed height of the container:
#outer{
display:table;
height:200px;
width:200px;
}
#inner1{
background-color:red;
display:table-row;
}
#inner2{
background-color:green;
display:table-row;
height:30px;
}
You'll find an example here: http://jsfiddle.net/bRg6m/
Is this what you want?
Added: Note that this doesn't work in IE7 or older. You'll have to use a Javascript solution if you want to support those browsers.
I'm not sure I understand your question.
I made an example here where the upper div is changing its width depending on the lower divs size. Is that what you needed?
http://jsfiddle.net/8fwXR/
HTML
<div id="wrapper">
<div id="box1"></div>
<div id="box2"></div>
</div>
CSS
#wrapper {
float: left;
}
#box1 {
background: red;
height: 100px;
width: 100%;
}
#box2 {
background: green;
height: 100px;
width: 400px;
}
Possibly this is what I meant:
document.getElementById("upperDiv").style.width = document.getElementById("bottomDiv").style.width
Really depends on your setup. The easiest way by far would be to just apply the javascript code to both DIVs at the same time.
Setting the width of the first DIV to be 100% should cause it to resize the width to match the second DIV (as the resize will force the parent DIV to increase in width too), but you will have a problem when trying to get the height to match, as with pure CSS the first DIV will have no reference to recalculate its own height to match.
Example Here
Alternatively, instead of making the second DIV resize you could resize the parent DIV and have both children set with CSS as follows:
width:100%;
height:50%;