Simple CSS Box question...

Discussion in 'CSS' started by S2X, Jan 13, 2011.

  1. #1
    Why does box4 push itself outside of box2, rather than simply stretching box2 out like text content inside of box2 would do?

    I've noticed that adding display: inline-block; works if I don't use float:right;, however when the float is added it acts as it does without inline-block added in...

    Untitled-1.jpg

    
    #newbox1 {
    	background-color: pink;
    	padding:5px;
    	border: 1px solid red;
    	width: 22%;
    	margin: 12px auto;
    }
    #newbox2 {
    	padding: 2px;
    	background-color: orange;
    	border: 1px dotted red;
    	margin: 4px;
    }
    #newbox3 {
    	padding-top: 33px;
    	margin-top: 21px;
    }
    .newbox4 {
    
    	border: 1px dashed blue;
    	float:right;
    	margin:12px;
    	padding: 12px;
    }
    
    Code (markup):
    <div id="newbox1">
    
    	<div id="newbox2">
    		<span class="newbox4">box4</span>
    		
    		box2
    		
    	</div>
    	
    	<div id="newbox3">box3</div>
    	
    </div>
    Code (markup):
     
    Last edited: Jan 13, 2011
    S2X, Jan 13, 2011 IP
  2. jeremyhowell

    jeremyhowell Member

    Messages:
    379
    Likes Received:
    7
    Best Answers:
    2
    Trophy Points:
    45
    #2
    Correct me if I am wrong but I dont think you can use display:inline-block and float in the same instance, when an element is floated it is removed from the normal flow of the layout, so you cannot have a block element and float it at the same time. Just display it as an inline-block.
     
    jeremyhowell, Jan 13, 2011 IP
  3. drhowarddrfine

    drhowarddrfine Peon

    Messages:
    5,428
    Likes Received:
    95
    Best Answers:
    7
    Trophy Points:
    0
    #3
    Parent elements are never to expand to contain floated elements. As noted, floated elements are removed from the normal flow. To get that box to expand to contain your float, add 'overflow:auto' to box2.
     
    drhowarddrfine, Jan 13, 2011 IP
  4. S2X

    S2X Active Member

    Messages:
    508
    Likes Received:
    22
    Best Answers:
    0
    Trophy Points:
    58
    #4
    How would I accomplish this with css?
    (The main box being fluid, and having an inner box aligned on the right side, which if its size was changed it would increase the size of the box holding it)
     
    S2X, Jan 13, 2011 IP
  5. drhowarddrfine

    drhowarddrfine Peon

    Messages:
    5,428
    Likes Received:
    95
    Best Answers:
    7
    Trophy Points:
    0
    #5
    I already told you.
     
    drhowarddrfine, Jan 13, 2011 IP
  6. jeremyhowell

    jeremyhowell Member

    Messages:
    379
    Likes Received:
    7
    Best Answers:
    2
    Trophy Points:
    45
    #6
    Lol. Here is the code as it appears you didn't completely grasp what drhowarddrfine posted before. :p

    
    #newbox2 {
    	overflow:auto;
    	padding: 2px;
    	background-color: orange;
    	border: 1px dotted red;
    	margin: 4px;
    }
    
    Code (markup):
     
    jeremyhowell, Jan 13, 2011 IP