CSS: How to limit length of the border-bottom div? - css

Question

the picture below has 2 divs, 1 is the part where the login form and the other is where the buttons on facebook and twitter, then I want is to put a border but with a specific length, which would where is the red box.
The width of first div is: 850px and the second is: 30% over the first!
I hope I have explained!
HTML
<div id="top">
<!--Productos de limpieza Master Clean <img src="media/user_icon.png"/><span>Inicia sesión ó <a href="registro.php" id="registro">registrate!</b></span>-->
<div id="loginform">
<form id="loginuser" name="loginuser" action="php/processFunctions.php" method="post">
<input id="userLog" class="required" name="userLog" type="text" placeholder="Usuario"/>
<input id="passLog" class="required" name="passLog" type="password" placeholder="Contraseña"/>
Iniciar ó
Registrarse
<span id="errorlogin"></span>
</form>
</div>
<span id="currentUser"></span>
<!--<h4>Búscanos en:</h4>-->
</div>
<div id="topsocial">
<ul id="socialmedia">
<li><img src="media/twitter.png" alt="Siguenos" title="Siguenos en Twitter"/></li>
<li><img src="media/facebook.png" alt="Like" title="Like en Facebook"/></li>
</ul>
</div>
CSS
#top {
height:50px;
background:white;
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
border-top-right-radius: 4px;
-webkit-border-top-left-radius: 4px;
-webkit-border-bottom-left: 4px;
-webkit-border-top-right: 4px;
-moz-border-radius-topleft: 4px;
-moz-border-radius-bottomleft: 4px;
-moz-border-radius-topright: 4px;
-webkit-box-shadow: 0px 0px 18px rgba(50, 50, 50, 0.79);
-moz-box-shadow: 0px 0px 18px rgba(50, 50, 50, 0.79);
box-shadow: 0px 0px 18px rgba(50, 50, 50, 0.79);
border: 5px solid black;
border-bottom:none;
}
#topsocial{
width:30%;
padding: 5px;
border-bottom-left-radius: 50% 75%;
border-bottom-right-radius: 50% 75%;
background:white;
overflow:hidden;
float:right;
position: relative;
-webkit-box-shadow: 0px 8px 16px rgba(50, 50, 50, 0.79);
-moz-box-shadow: 0px 8px 16px rgba(50, 50, 50, 0.79);
box-shadow: 0px 8px 16px rgba(50, 50, 50, 0.79);
border: 5px solid black;
border-top: none;
}
I've have another question, how quit or delete box-shadow from top to second div #topsocial?

Answer 1

You can set the first <div> to the size of the box with the border and the second <div> can be placed in absolute position and cover the border.
I've made a jsFiddle to show you how to do it. We don't have your HTML so I hoped it helps anyway.

Answer 2

Supplying the markup and CSS would help get a more useful answer, but the first suggestion would be to make a new <div> which will contain the login form and the rounded border inside the 850px wrapping <div>. Then set a width on the inside <div> that is to the left of the facebook and twitter block, but overlap the border slightly. Then extend the 30% <div> to the top.
UPDATE: http://jsfiddle.net/zFa9n/

Answer 3

I have put a little change only on your CSS code that works fine for any screen width, and give you the result you need, I hope you like it.
#top {
height:50px;
background:white;
border: 5px solid black;
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
border-top-right-radius: 4px;
-webkit-border-top-left-radius: 4px;
-webkit-border-bottom-left: 4px;
-webkit-border-top-right: 4px;
-moz-border-radius-topleft: 4px;
-moz-border-radius-bottomleft: 4px;
-moz-border-radius-topright: 4px;
-webkit-box-shadow: 0px 0px 18px rgba(50, 50, 50, 0.79);
-moz-box-shadow: 0px 0px 18px rgba(50, 50, 50, 0.79);
box-shadow: 0px 0px 18px rgba(50, 50, 50, 0.79);
}
#topsocial{
position: relative;
top:-5px;
width:30%;
float:right;
padding: 5px;
border: 5px solid black;
border-top: none;
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
-moz-border-radius-bottomleft: 4px;
-moz-border-radius-bottomright: 4px;
background:white;
overflow:hidden;
-webkit-box-shadow: 0px 8px 16px rgba(50, 50, 50, 0.79);
-moz-box-shadow: 0px 8px 16px rgba(50, 50, 50, 0.79);
box-shadow: 0px 8px 16px rgba(50, 50, 50, 0.79);
}